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

【问题标题】：Darken a background image without affecting the Text在不影响文本的情况下使背景图像变暗
【发布时间】：2020-04-03 00:58:46
【问题描述】：

我快到了，但是a-tag里面的文字应该不会受到半透明覆盖的影响：

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

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

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

添加了一个新元素：

.tint:before

具有半透明背景：

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

但是“before”元素也在a元素内的文本上方，使其变暗。

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

谢谢！克里斯

【问题讨论】：

标签： html css z-index transparent

【解决方案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>

【讨论】：

您甚至可以从.tint 和.tint:before 中完全删除z-index。
或者你可以使用box-shadow: 0 0 0 1000px rgba(0,0,0,0.5) inset;。 jsfiddle.net/tx58qf3m/5
@SzabolcsPáll 使用大框阴影会破坏页面性能，尤其是在内容丰富的页面上滚动时。
@Nit 我不知道，你有什么参考吗？
@SzabolcsPáll 例子不胜枚举，只要谷歌一下 box-shadow 性能问题，请参阅this Airbnb 文章以获取示例。

【解决方案2】：

最直接的解决方案是将链接的内容包含在一个元素中并将其应用于背景。

HTML：

<a class="tint t1 block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">
    <div class="overlay">
        <h2>Themenwoche: Glatt gelogen!</h2>
        <p>Aktueller Beitrag</p>
    </div>
</a>

<a class="tint block" style="background-image:url(http://toxic.fm/site/wp-content/uploads/2014/01/topelement-255x260.jpg)" href="#">
    <div class="overlay">
        <h2>Themenwoche: Glatt gelogen!</h2>
        <p>Aktueller Beitrag</p>
    </div>
</a>

CSS：

body {
    color: #fff;
    font-family:arial;
}

a {
    color:#fff;
}

.block {
    display:block;
    width:250px;
    height:250px;
}

.tint {
    float: left;
    cursor: pointer;
}

.overlay {
    width: 210px;
    height: 210px;
    padding: 20px;
    background: rgba(0,0,0, 0.5);
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.overlay *:first-child {
    margin-top: 0;
}

.tint:hover .overlay {
    background: none;
}

见this JSFiddle。

【讨论】：