HTML – 有没有更好的方法来使背景图像变暗？

概述我有以下代码,以使背景图像变暗.一个带有背景图像的div然后是一个div,里面用透明度填充背景颜色 <div class="slide"> <div class="slide-overlay"> <div class="slide-content"> <h1>Blah blah content</h1> </div> </div></div> 我这样做的风格 我有以下代码,以使背景图像变暗.一个带有背景图像的div然后是一个div,里面用透明度填充背景颜色

<div >  <div >    <div >      <h1>Blah blah content</h1>    </div>   </div></div>

我这样做的风格

.slIDe    background-image: url('/assets/img/bg-cover.jpg')    background-size: cover.slIDe-overlay    background-color: rgba(0,.2)

有谁知道更优雅的解决方案？

解决方法 您可以简化的唯一方法是省略.slIDe-overlay容器并添加伪元素(：before,：after).

这将是解决方案：

.slIDe {    background-color: tomato;    background-size: cover;}.slIDe-content {    position: relative;    color: white;}.slIDe-content:nth-child(2):before,.slIDe-content:nth-child(3):before {    content: "";    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    background-color: rgba(0,0.2);}.slIDe-content:nth-child(3) {    z-index: 1;}.slIDe-content:nth-child(3):before {    z-index: -1;}

<div >    <div >         <h1>No effects - just standard text.</h1>    </div>    <div >         <h1>With overlay - text is below the overlay.</h1>    </div>    <div >         <h1>With overlay - text is above the overlay.</h1>    </div></div>

编辑：伪元素下面的文字不再受叠加分别Alpha通道的影响.

总结

以上是内存溢出为你收集整理的HTML – 有没有更好的方法来使背景图像变暗？全部内容，希望文章能够帮你解决HTML – 有没有更好的方法来使背景图像变暗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。