html - 在不影响文本的情况下使背景图像变暗

Question

我快到了，但是 a-tag 内的文本应该不会受到半透明覆盖的影响:

http://jsfiddle.net/ChrisPrefect/GPLfM/

无论您是否将鼠标悬停在图片上，文本都应为亮白色。

如有必要，我可以添加更多 html 元素，但我希望将其保持在最低限度。

添加了一个新元素:

.tint:before

具有半透明背景:

background: rgba(0,0,0, 0.5);

但是“before”元素也覆盖了 a 元素内的文本并使其变暗。

这可以通过 z-index 排序解决吗？

谢谢! 克里斯

Answer 1

这可以通过正确排列元素的堆叠顺序轻松解决。注意在文本内容上使用相对定位。

.block {
  display: inline-block;
  color: #fff;
  position: relative;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.block:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: all .2s linear;
}

.block:hover:before {
  background: none;
}

.block h2,
.block p {
  position: relative;
}

<a class="block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">
  <h2>Dogs are great sleepers</h2>
  <p>Mine can sleep all day long</p>
</a>


<a class="block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">
  <h2>Dogs are great sleepers</h2>
  <p>Mine can sleep all day long</p>
</a>