如何在没有HTML的情况下将文本背景放在另一个背景图像上

Question

我制作了一个带有复选框作为森林图像的表单。我需要在森林checbox图像上放置另一个带有来自html参数（data-forest）的文本的透明背景，但我只能通过CSS执行此操作。我尝试了很多解决方案，但没有人正常工作。有人有想法吗？

悬停时的最终效果 ：

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

HTML

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

CSS

var optsCorners = data.opts.turnCorners.split(','),
  ***flipData = data.pages[current].data().f,***
  opts = flipData.opts,
  actualPoint = flipData.point;

Answer 1

我的建议：

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。

Answer 2

使用伪元素。

/* 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