Bild erscheint nicht auf einem Etikett

Question

Ich möchte ein Bild zu einem Etikett hinzufügen, aber das Bild wird nicht angezeigt. Ich benutze das Spiel-Framework.

Was ich versuche zu tun, ist ein Bild anstelle eines Kontrollkästchens, wo das Bild die Rolle eines Kontrollkästchens spielt.

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

Nähte zu arbeiten ...

Vielleicht die URL, um Ihre Bilder falsch ist, oder Höhe und Breite zu klein ...

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

Ihr Code arbeitet mit korrekten Bildpfade

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