图像不会出现在标签顶部

Question

我想在标签中添加一个图像，但图像没有出现。我使用游戏框架。

我想做的是放一个图像，而不是一个复选框，图像在其中扮演复选框的角色。

input[type="checkbox"] {
    opacity:0;
    height: 16px;
    width: 17px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
input[type="checkbox"] + label{
    background-image: url("/assets/images/help.jpg");
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
input[type="checkbox"]:checked + label{
    background-image: url("/assets/images/help.jpg");
    height: 16px;
    width: 17px;
    display:inline-block;
    padding: 0 0 0 0px;
}

<label class="checkbox_wrapper navbar-text navbar-right font-size-8pt margin-bottom-0px"><input type="checkbox" id="enable-help"><label></label></label>

Answer 1

接缝正在工作。。。

也许你的图片的url是错误的，或者高度和宽度太小。。。

input[type="checkbox"] {
    opacity:0;
    height: 459px;
    width: 459px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
input[type="checkbox"] + label{
    background-image: url("http://image005.flaticon.com/55/svg/61/61221.svg");
    height: 459px;
    width: 459px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
input[type="checkbox"]:checked + label{
    background-image: url("http://image005.flaticon.com/55/svg/61/61141.svg");
    height: 459px;
    width: 459px;
    display:inline-block;
    padding: 0 0 0 0px;
}

<label class="checkbox_wrapper navbar-text navbar-right font-size-8pt margin-bottom-0px"><input type="checkbox" id="enable-help"><label></label></label>

Answer 2

您的代码使用正确的图像路径

点击此处查看

input[type="checkbox"] + label{
    background-image: url("http://lorempicsum.com/futurama/350/200/1");
    height: 255px;
    width: 255px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}
input[type="checkbox"]:checked + label{
    background-image: url("http://lorempicsum.com/futurama/255/200/2");
    height: 200px;
    width: 255px;
    display:inline-block;
    padding: 0 0 0 0px;
}