Question

我想在标签上添加图片，但图片不会显示。我使用play框架。

我尝试做的是放置图像而不是复选框，其中图像扮演复选框的角色。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

Seams to be working ...

Maybe the url to your images is wrong, or height and width is too small...

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

Your code works with correct image paths

See it here

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;
}

图像不会出现在标签的顶部

2 个答案: