如何使用css中:after伪元素完成背景图片的叠加层？
[摘要]在网页设计中我们发现越来越多的文本会放在图像之上，通常情况下，这不太好操作，因为图像具有动态颜色和光照，文本大部分是一种颜色。这通常对于可读性和可访问性的不太有利的，可能会让文本看起来不太清楚。这意...
在网页设计中我们发现越来越多的文本会放在图像之上，通常情况下，这不太好操作，因为图像具有动态颜色和光照，文本大部分是一种颜色。这通常对于可读性和可访问性的不太有利的，可能会让文本看起来不太清楚。这意味着如果我们想要在图像和文本之间引入叠加层，那么有时这会使背景图像变暗以便于阅读。我们都需要一种简单的CSS技术来引入这种叠加。（推荐课程：css3视频教程）
由于我不想为修饰引入新标记，我们将使用CSS ::after伪元素。
我们可以通过以下过程来实现。
1、为你所需要的区域创建最简单的HTML
2、使用::before或::after元素创建背景图
3、使用z-index修改绝对定位导致的问题
4、可以尝试使用mix-blend-mode实现一些有趣的效果
第1步：你需要的是没有任何多余标记的背景图
在背景图中，我们真正想要的只是背景图作为容器以及背景图需要包含的任何内容。
<section class="banner">
<h1>Hello World</h1>
</section>
在这个例子中，我们只使用一个section容器和一个<h1>。如果您添加了更多内容，它可能是同级元素，<h1>或者您可以将所有内容放在某种内容容器中进行随意定位。
这里有一个小“魔法”，可以增加背景图的高度以及文本的中心位置。这对于本篇内容境界并不重要，但是如果你很好奇，可以自己试一试。
第2步：使用:: after动态添加叠加元素
CSS为我们提供的::before和::after元素有强大的功能，用于向不该影响标记的页面添加样式内容。
通过应用::before或::after元素，您可以在选定元素子元素之前或之后将动态元素插入DOM。
一个重要的注意事项是，所有伪元素都需要content显示CSS属性。虽然在我们的例子中，content只是一个空白字符串。
.banner::after {
content: ""; // ::before and ::after both require content
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
opacity: .7;}
