html - 图像没有出现在标签的顶部

Question

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

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

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

接缝工作......

可能是你的图片地址不对，或者高度和宽度太小了...

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>