如何在没有HTML的情况下将背景与文字叠加到另一个背景图像

Question

我制作了一个复选框作为森林图像。我需要从html参数（数据森林）的森林checbox图像放置另一个透明背景，但我只能通过CSS来做到这一点。我已经尝试了很多解决方案，但没有人能正常工作。任何人有一些想法？

悬停最终效果：

的jsfiddle：https://jsfiddle.net/ac9z8sgd/

HTML

<form action="action" method="get"> 
    <input type="hidden" name="test" value="test" /> 
    <ul> 
    <li><input id="checkbox" type="checkbox" name="forest_type" value="forest_1"><label for="checkbox_forest" data-forest="Estern forest">Forest 1</label></li> 
    </ul> 
    <button type="submit">Submit</button> 
</form> 

CSS

/* Default check button */ 
#checkbox + label { 

    background: url('http://i.imgur.com/Ds7gh7b.jpg?1'); 
    background-repeat: no-repeat; 
    height: 250px; 
    width: 250px; 
    padding: 15px 15px; 
    display: inline-block; 
    position: relative; 
} 
/* Hover action */ 
#checkbox + label[data-forest]:hover { 
    background: rgba(0,0,0,0.8); 
    content: attr(data-forest); 
    display: inline-block; 
    font-size: 20px; 
    color: white; 
    position: relative; 
} 

Answer 1

使用伪元素。

/* Default check button */ 
 

 
#checkbox + label { 
 
    background: url('http://i.imgur.com/Ds7gh7b.jpg?1'); 
 
    background-repeat: no-repeat; 
 
    height: 275px; 
 
    width: 184px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
/* Hover action */ 
 

 
#checkbox + label[data-forest]:hover::after { 
 
    background: rgba(0, 0, 0, 0.8); 
 
    content: attr(data-forest); 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50%; 
 
    font-size: 20px; 
 
    color: white; 
 
    display: flex; 
 
}

<form action="action" method="get"> 
 
    <input type="hidden" name="test" value="test" /> 
 
    <ul> 
 
    <li> 
 
     <input id="checkbox" type="checkbox" name="forest_type" value="forest_1"> 
 
     <label for="checkbox_forest" data-forest="Estern forest">Forest 1</label> 
 
    </li> 
 
    </ul> 
 
    <button type="submit">Submit</button> 
 
</form>

JSfiddle with Transitions

Answer 2

我的建议：

label[data-forest]:hover:before { 
    background: rgba(0,0,0,0.8); 
    content: attr(data-forest); 
    font-size: 20px; 
    color: white; 
    margin-top: 240px; 
    margin-left: -15px; 
    position: absolute; 
    width: 100%; 
    text-align: center; 
} 

BTW：也许是0.8太多可察觉透明度高值。我会做到0.4。