CSS：多背景图片叠加

马黑黑 · 发表于 2022-10-3 19:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-10-3 19:46 编辑

之前，我在少量帖子里用几个渐变效果做背景，细心的朋友会发现，都会用上 background-blend-mode 属性为不同渐变效果设置滤镜，以便这些渐变的背景能交融在一起，共同营造预设的效果。

CSS3和HTML5支持元素拥有多个背景图像（渐变也被视为图像），但当背景是相互叠加的时候，只有最先表达的背景是显示的，后面表达的背景被前面的覆盖因而根本无法看到。考虑一下以下的背景图片设置：

background: url('./fbg1.png') no-repeat, url('./fbg2.jpg') no-repeat center/cover;

第一张图片是酱紫：

第二章图片是酱紫：

前面的背景图片设置，完整的CSS和HTML代码长如下酱紫：

<style>
.papa {
   margin: auto;
   width: 460px;
   height: 300px;
   box-shadow: 3px 3px 8px #000;
   background: url('./fbg1.png') no-repeat, url('./fbg2.jpg') no-repeat center/cover;
}
</style>

<div class="papa"></div>

效果则是如下这个样纸：

眼不尖的童鞋也发现了：第二背景图没有出现！

是的，重合性的叠加，第一张图片享受优先权，如果设置为 no-repeat，那么，它会以图像自身的真实尺寸去覆盖后面的图片，实际图片越大，它所覆盖的尺寸就跟着越大。为了交融，必须用上滤镜。例如，上述两张图，第一张我们只想要荷花部分，其余过滤掉，那么，screen 滤镜是合适的，它能将黑色干掉，第二张图，我们想正常显示，则滤镜是 normal，即正常，不用滤镜。我们试着给 .papa 选择器加入滤镜设置：

background-blend-mode: screen, normal;

效果：

嗯，这是我们所期待的样纸，一切都有赖于滤镜。通过此例，我们可以举一反三，即使加入更多的图片做背景，依然可以从容操作。