背景图像渐变叠加
五年前，我创建了一个CodePen 示例，演示如何在背景图像上应用渐变叠加层。自那以后，该示例已被浏览超过 294,804 次，并获得了 705 个赞。
由于它至今仍被人们每天提及，我想我应该好好写一篇关于它的文章。
首先，我们来创建横幅元素，并为其应用背景图片和渐变叠加层。我们还会添加一个额外的内容容器，用于存放横幅内的元素，稍后会用到它。
<div class="banner">
<div class="banner__content">
<h1>Banner Heading</h1>
<p>Banner description</p>
</div>
</div>
接下来，我们将背景图片应用到横幅元素，并将最小高度设置为 400px。
.banner {
position: relative;
width: 100%;
min-height: 400px;
background: url('http://unsplash.it/1200x800');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
为了应用渐变叠加层，我们将使用伪元素。我们将叠加层绝对定位，使其覆盖横幅的 100% 宽度和高度。
.banner:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom right, red, blue);
opacity: 0.6;
}
最后，我们再来看一下横幅内容容器。由于我们使用伪元素应用了渐变叠加层，有时会遇到横幅内的内容显示在渐变叠加层下方的问题。为了解决这个问题，我们将横幅内的所有内容包裹在一个容器中，并将其设置为z-index高于叠加层，如下所示。
.banner__content {
position: relative;
z-index: 10;
}
正如第一条评论中提到的，你可以省略伪元素，使用多个背景。这种方法也很好，但会失去鼠标悬停时渐变动画的功能，而这可能是一个常见的应用场景。
查看原始CodePen 代码。
文章来源：https://dev.to/hybrid_alex/background-image-gradient-overlay-534f