认识CSS的background（七）
<style>.ma { font: normal 20px/24px sans-serif; }
.ma p { margin: 12px 0; }
.ma mark { background: lightblue; padding: 0 6px; }
show-box {
margin: 20px auto;
width: 600px;
height: 300px;
border: 1px dashed gray;
background-color: lightblue;
display: block;
}
show-box:nth-of-type(1) {
background-image:
url('https://638183.freep.cn/638183/small/bg-sm.png'),
url('https://638183.freep.cn/638183/small/flower.gif'),
url('https://638183.freep.cn/638183/small/4yc.png');
background-repeat: no-repeat;
background-position: 0 0, center, 100% 100%;
background-size: auto, auto, auto;
}
show-box:nth-of-type(2) {
background-image: url('https://638183.freep.cn/638183/Pic/10.jpg'), url('https://638183.freep.cn/638183/Pic/3.jpg');
background-repeat: no-repeat, no-repeat;
background-position: 0 0, 100% 100%;
}
show-box:nth-of-type(3) {
background-image: url('https://638183.freep.cn/638183/Pic/10.jpg'), url('https://638183.freep.cn/638183/Pic/3.jpg');
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: darken;
}
#btnwrap { margin: 20px auto 0; width: fit-content; }
#btnwrap > button { margin: 0 6px; color: black; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thin solid silver; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
.iMid { text-align: center; }
</style>
<div class="ma">
<p>这一讲我们来讨论多背景图像的应用。我们先来看看如何在元素上布置多个背景图图像，比如三个背景图像，以及怎样设置它们：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tGreen">/* 设定三个背景图像 */</span></cl-cd>
<cl-cd data-idx="2"><span class="tBlue">background-image:</span> url(<span class="tMagenta">'图片1'</span>), url(<span class="tMagenta">'图片2'</span>), url(<span class="tMagenta">'图片3'</span>);</cl-cd>
<cl-cd data-idx="3"> </cl-cd>
<cl-cd data-idx="4"><span class="tGreen">/* 设定图像的重复模式 ：单值表示三个图像统一设置 */</span></cl-cd>
<cl-cd data-idx="5"><span class="tBlue">background-repeat:</span> no-repeat;</cl-cd>
<cl-cd data-idx="6"> </cl-cd>
<cl-cd data-idx="7"><span class="tGreen">/* 设置图片位置 ：每一个值若设定单值，表示垂直方向居中 */</span></cl-cd>
<cl-cd data-idx="8"><span class="tBlue">background-position:</span> 0 0, center, 100% 100%;</cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><span class="tGreen">/* 设置图片尺寸 ：使用图像的原始大小时可以省略；每一个值可以设置宽、高 */</span></cl-cd>
<cl-cd data-idx="11"><span class="tBlue">background-size:</span> auto, auto, auto;</cl-cd>
<cl-cd data-idx="12"> </cl-cd>
<div class="tGreen"><cl-cd data-idx="13">/* 上面的代码可以使用 background 简写属性实现 ：代码更简洁</cl-cd>
<cl-cd data-idx="14"> 如果需要定义 background-size，以图片1为例，可以写成：</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">background:</span> url(<span class="tMagenta">'图片1'</span>) no-repeat 0 0 / 85px 90px, ...., ...;</cl-cd>
<cl-cd data-idx="16">*/</cl-cd></div>
<cl-cd data-idx="17"><span class="tBlue">background:</span> url(<span class="tMagenta">'图片1'</span>) no-repeat 0 0, url(<span class="tMagenta">'图片2'</span>) no-repeat center, url(<span class="tMagenta">'图片3'</span>) no-repeat 100% 100%;</cl-cd>
</div>
<p>代码中可以看到，图片地址用 CSS 函数 url('图片地址') 封装，每一个url() 是一个背景图片的表述单位，中间用小角逗号隔开；其余相应的 background-* 属性也是用小角逗号隔开彼此的属性值，但要注意，同一个属性的双属性值是用空格隔开的。当图片地址真实有效，则效果应大致如下所示：</p>
<show-box></show-box>
<p>上述演示，所用图片都是小图片，且彼此拉开了足够的距离，相互之间没有互相覆盖，因此三个背景图片都能完整看到。如果背景图片之间在元素平面上有重合，则重合的部分只能显示其中的一个，规则是老大优先，上面例子中最先写出来的 url('图片1') 是老大。下面的演示，第一张背景图片和第二张背景图片中间部分有交合，重合的部分中只能看到第一张图片的内容，第二张图片重合的部分被第一张遮挡了看不到这一部分画面：</p>
<show-box></show-box>
<p>多背景图像重叠技术现在被广泛使用，把握得好可以营造出一些特别的效果。同样是第二个示例的两只小鸟，我们让它以no-repeat、cover的方式完全地重叠在元素之上，然后利用 background-blend-mode 混合滤镜属性的 darken 属性值将它们融合在一起。看看效果如何：</p>
<show-box></show-box>
<p>结果令人惊叹，酷得不要不要的。当然也有不如意之处，融合滤镜要用得好，需要合适的图片和恰当的属性值以及丰富的操作经验，而这些都需要多加尝试。核心代码如下：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">background-image:</span> </cl-cd>
<cl-cd data-idx="2"> url(<span class="tMagenta">'https://638183.freep.cn/638183/Pic/10.jpg'</span>),</cl-cd>
<cl-cd data-idx="3"> url(<span class="tMagenta">'https://638183.freep.cn/638183/Pic/3.jpg'</span>);</cl-cd>
<cl-cd data-idx="4"><span class="tBlue">background-repeat:</span> no-repeat;</cl-cd>
<cl-cd data-idx="5"><span class="tBlue">background-size:</span> cover;</cl-cd>
<cl-cd data-idx="6"><span class="tBlue">background-blend-mode:</span> darken;</cl-cd>
</div>
<p>更多的多重背景设置技巧我们将在下一节继续探讨，敬请期待。</p>
</div> 多重背景。。好熟悉啊，代码PS的融图效果。。。{:4_173:} 三个小图，可以学习图片在元素上的排布，通过效果增加感受。
两张小鸟儿融合起来很惊艳。 南无月 发表于 2024-3-14 12:46
多重背景。。好熟悉啊，代码PS的融图效果。。。
PS是首HTML的启发才有的滤镜 图片的分布可以在元素上有各种排布和展示呢。学习了{:4_199:} 红影 发表于 2024-3-14 13:28
三个小图，可以学习图片在元素上的排布，通过效果增加感受。
两张小鸟儿融合起来很惊艳。
惊艳，很多人这么说，不过它的确不能细化修饰 background要学的东西还真不少啊{:4_187:} 红影 发表于 2024-3-14 13:29
图片的分布可以在元素上有各种排布和展示呢。学习了
那么多的background-*属性，怎么可以简简单单 红影 发表于 2024-3-14 13:30
background要学的东西还真不少啊
其实细究起来，很多属性都可以下力气去研究研究 马黑黑 发表于 2024-3-14 13:29
PS是首HTML的启发才有的滤镜
这么多事实证明，这个结论是真的。我信。。{:4_173:} css很强大{:4_199:} 马黑黑 发表于 2024-3-14 13:29
惊艳，很多人这么说，不过它的确不能细化修饰
就这样的效果已经挺好了呢{:4_187:} 马黑黑 发表于 2024-3-14 13:30
那么多的background-*属性，怎么可以简简单单
是啊，每一个属性都能让效果产生变化呢。 马黑黑 发表于 2024-3-14 13:31
其实细究起来，很多属性都可以下力气去研究研究
之前都不知道有这么多属性呢，而且还仅仅是background，css的东西真不少啊。 红影 发表于 2024-3-14 21:33
之前都不知道有这么多属性呢，而且还仅仅是background，css的东西真不少啊。
我们都喜欢使用简写属性。每一个简写属性都可以细分为诸多个属性 红影 发表于 2024-3-14 21:32
是啊，每一个属性都能让效果产生变化呢。
那是自然 红影 发表于 2024-3-14 21:32
就这样的效果已经挺好了呢
还好还好 小辣椒 发表于 2024-3-14 16:11
css很强大
还不错 南无月 发表于 2024-3-14 14:13
这么多事实证明，这个结论是真的。我信。。
开玩笑的哈
图层引出滤镜，是从（电影）摄影那里来的，PS借用了这个东东，然后呢，w3c组织在CSS里也分多次引入了，其中的 filter 属性是正儿八经的滤镜，*-blend-mode 严格来讲也可视为滤镜，用于融合。 马黑黑 发表于 2024-3-15 12:03
开玩笑的哈
图层引出滤镜，是从（电影）摄影那里来的，PS借用了这个东东，然后呢，w3c组织在CSS里也分 ...
开玩笑我知道的呀。。。
不过是真不知道谁先谁后。。
现在看看呢，原来是从电影来的。。{:4_173:}