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

Question

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

最终效果悬停：

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

我的建议：

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

顺便说一句：也许 0.8 对于可感知的透明度来说是一个太大的值。我会把它设为 0.4。

Answer 2

使用 pseudo-element.

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

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

How to place background with text over another background image without HTML

css

image

onhover