CSS：多背景图片叠加
本帖最后由 马黑黑 于 2022-10-3 19:46 编辑 <br /><br /><style>.papa {
margin: 10px auto;
width: 460px;
height: 300px;
box-shadow: 3px 3px 8px #000;
background: url('/data/attachment/forum/202210/03/190218nn44vrjromgj740p.png') no-repeat, url('/data/attachment/forum/202210/03/190218mfovkul5mxl8fzzf.jpg') no-repeat center/cover;
}
</style>
<p>之前，我在少量帖子里用几个渐变效果做背景，细心的朋友会发现，都会用上 background-blend-mode 属性为不同渐变效果设置滤镜，以便这些渐变的背景能交融在一起，共同营造预设的效果。<br><br></p>
<p>CSS3和HTML5支持元素拥有多个背景图像（渐变也被视为图像），但当背景是相互叠加的时候，只有最先表达的背景是显示的，后面表达的背景被前面的覆盖因而根本无法看到。考虑一下以下的背景图片设置：<br><br></p>
<p> <span style="color: blue;">background</span>: url(<span style="color: magenta">'./fbg1.png'</span>) no-repeat, url(<span style="color: magenta">'./fbg2.jpg'</span>) no-repeat center/cover;<br><br></p>
<p>第一张图片是酱紫：<br><br><img src="/data/attachment/forum/202210/03/190218nn44vrjromgj740p.png" border="0"></p>
<p><br>第二章图片是酱紫：<br><br><img src="/data/attachment/forum/202210/03/190218mfovkul5mxl8fzzf.jpg" width="660" _height="346" border="0"><br><br></p>
<p>前面的背景图片设置，完整的CSS和HTML代码长如下酱紫：<br><br></p>
<pre><style>
<span style="color: red;">.papa </span>{
<span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 460px;
<span style="color: blue;">height</span>: 300px;
<span style="color: blue;">box-shadow</span>: 3px 3px 8px #000;
<span style="color: blue;">background</span>: url(<span style="color: magenta">'./fbg1.png'</span>) no-repeat, url(<span style="color: magenta">'./fbg2.jpg'</span>) no-repeat center/cover;
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"papa"</span>><<span style="color: darkred">/div</span>>
</pre>
<p>效果则是如下这个样纸：<br><br></p>
<div class="papa"></div>
<p><br>眼不尖的童鞋也发现了：第二背景图没有出现！</p><p><br></p><p>是的，重合性的叠加，第一张图片享受优先权，如果设置为 no-repeat，那么，它会以图像自身的真实尺寸去覆盖后面的图片，实际图片越大，它所覆盖的尺寸就跟着越大。为了交融，必须用上滤镜。例如，上述两张图，第一张我们只想要荷花部分，其余过滤掉，那么，screen 滤镜是合适的，它能将黑色干掉，第二张图，我们想正常显示，则滤镜是 normal，即正常，不用滤镜。我们试着给 .papa 选择器加入滤镜设置：<br><br></p>
<p> <span style="color: blue;">background-blend-mode</span>: screen, normal;<br><br></p>
<p>效果：</p>
<div class="papa" style="background-blend-mode: screen, normal;"></div>
<p><br>嗯，这是我们所期待的样纸，一切都有赖于滤镜。通过此例，我们可以举一反三，即使加入更多的图片做背景，依然可以从容操作。</p> 干裂的土地需要眼泪的滋润，朋友请哭{:4_170:} 用滤镜可以，用透明度也可以，看你前面的帖子就是透明度来混合的{:4_204:} 马黑黑 发表于 2022-10-3 19:41
干裂的土地需要眼泪的滋润，朋友请哭
想起那首歌了， 尽情哭泣{:4_173:} 红影 发表于 2022-10-3 19:58
想起那首歌了， 尽情哭泣
还有什么男儿哭吧哭吧不是罪 红影 发表于 2022-10-3 19:57
用滤镜可以，用透明度也可以，看你前面的帖子就是透明度来混合的
用透明度的话，要使用多元素叠加，伪元素也是元素 吕方《朋友别哭》 黑黑这个出来，后面就是作品出来。期待~~~ 小辣椒 发表于 2022-10-3 22:11
黑黑这个出来，后面就是作品出来。期待~~~
你又知道{:4_170:} 马黑黑 发表于 2022-10-3 20:47
用透明度的话，要使用多元素叠加，伪元素也是元素
哦哦，用滤镜就不需要了吧？ 马黑黑 发表于 2022-10-3 20:46
还有什么男儿哭吧哭吧不是罪
带哭字的歌还挺多{:4_173:} 红影 发表于 2022-10-4 16:32
带哭字的歌还挺多
哭是感情表达的重要手段 红影 发表于 2022-10-4 16:32
哦哦，用滤镜就不需要了吧？
可以试试 马黑黑 发表于 2022-10-4 17:08
哭是感情表达的重要手段
据说泪水可以排毒的{:4_173:} 马黑黑 发表于 2022-10-4 17:08
可以试试
嗯，先吃饭去了。空了我试试{:4_204:} 红影 发表于 2022-10-4 17:43
嗯，先吃饭去了。空了我试试
{:4_181:} 红影 发表于 2022-10-4 17:43
据说泪水可以排毒的
是的，所以哭吧哭吧不是罪 马黑黑 发表于 2022-10-4 18:46
是的，所以哭吧哭吧不是罪
黑黑不准备也排点？反正不是罪{:4_173:} 红影 发表于 2022-10-5 10:09
黑黑不准备也排点？反正不是罪
我靠爬山排毒 期待老师做几个多图片渐变效果来做背景