认识CSS的background（八）
本帖最后由 马黑黑 于 2024-3-16 23:04 编辑 <br /><br /><style>.pa { font: normal 18px / 26px sans-serif; }
.pa p { margin: 16px 0; }
.showbox {
margin: 20px auto;
width: 600px;
height: 300px;
border: thick double gray;
border-radius: 6px;
background: lightblue;
position: relative;
--blend: normal;
--blend1: overlay,screen;
}
.showbox::before {
position: absolute;
content: '';
inset: 3px;
}
#dark::before {
background: #333 url('https://638183.freep.cn/638183/Pic/7.jpg') no-repeat 100% 0 / 70% 100%;
background-blend-mode: var(--blend);
}
#gradient::before {
background: url('https://638183.freep.cn/638183/Pic/7.jpg') no-repeat 100% 0 / 70% 100%, radial-gradient(black, green, red) #333;
background-blend-mode: var(--blend1);
}
.tMid { text-align: center; }
.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 lightblue; 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; }
</style>
<div class="pa">
<p>背景颜色，background-color，早期常用来预防图片失效时元素上的文本仍然可以清晰显示，一般这么设置：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">background:</span> #333 url(<span class="tMagenta">'背景图片地址'</span>) no-repeat center/cover;</cl-cd>
</div>
<p>这要求背景颜色与背景图像的总体色系相一致或相近。上述写法是background-*的简写，颜色代码和图像代码之间用一个空格隔开，颜色在前图像在后的写法也只能使用空格隔开。颜色代码也可以写在图像代码的后面，二者间用空格或小角逗号隔开（建议后者，便于区分）。如下两种写法都是合法有效的：</p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tGreen">/* 写法一 */</span></cl-cd>
<cl-cd data-idx="2"><span class="tBlue">background:</span> url(<span class="tMagenta">'背景图片地址'</span>) no-repeat center/cover #333;</cl-cd>
<cl-cd data-idx="3"><span class="tGreen">/* 写法二 */</span></cl-cd>
<cl-cd data-idx="4"><span class="tBlue">background:</span> url(<span class="tMagenta">'背景图片地址'</span>) no-repeat center/cover, #333;</cl-cd>
</div>
<p>作为背景样式的构造参与者之一，背景颜色（分开写时是background-color）可以视为是背景构成的图层之一，它的作用不仅在背景图像失效时提供一个相对友好的阅读环境，还能参与到背景图像的融合（background-blend-mode）效果中来。以下演示，在启用背景图像融合滤镜前，背景图像是它原始的样子，并不受到元素的背景颜色的影响：</p>
<div class="showbox" id="dark"></div>
<p class="tMid"><button id="btnDarken" type="button" value="multiply">启用 background-blend-mode 为 multiply</button></p>
<p>我个人坚持认为：背景颜色在使用背景图像融合技术时会作用于整体融合效果，但融合技术并不能直接作用于背景颜色，换言之，我们假若尝试使用 background-blend-mode 来修改背景颜色本体，那是不现实的，尽管有CSS大佬认为可以；上述演示，在我们通过点击按钮来手工启用了 multiply 融合滤镜之后，左边不被图像覆盖的区域仍然保持其原始状态（#333）——或许有人觉得确实有变化，那么，请使用拾色器检查一下左边区域的颜色是否存在变化。可以这么理解：融合技术总体上是直接作用于图像而非背景颜色，但一旦使用了背景融合技术，由于图像会因在复杂的算法中有部分像素变成一定程度的透明，元素的背景颜色就能从图像图层之下溢出，以此方式参与到融合技术所产生的效果。因此我赞同背景颜色+背景图像也属于元素的多背景图像的说法，尤其是在启用了背景融合技术之时。</p>
<p>地道的多重背景则应是元素的背景使用了多个图像，图像包含实质意义上的诸如 .png、.jpg、.jpeg、.webp 之类的图片，以及渐变背景 *-gradient。以下示例，使用了上述背景颜色+背景图片，在此基础上再加入一个 radial-gradient 径向渐变背景。看效果和代码：</p>
<div class="showbox" id="gradient"></div>
<p class="tMid"><button id="btnOverlay" type="button" value="overlay">只使用 overlay 融合滤镜</button></p>
<div class='mum'>
<cl-cd data-idx="1"><span class="tBlue">background:</span> </cl-cd>
<cl-cd data-idx="2"> url(<span class="tMagenta">'https://638183.freep.cn/638183/Pic/7.jpg'</span>) no-repeat 100% 0 / 70% 100%,</cl-cd>
<cl-cd data-idx="3"> radial-gradient(black, green, red),</cl-cd>
<cl-cd data-idx="4"> #333;</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">background-blend-mode:</span> overlay,screen;</cl-cd>
</div>
<p>特别注意上面的background简写属性中，背景颜色 #333 是写在最后的，若写在前面，背景颜色在融合效果中不能发挥作用。此外，融合滤镜我们使用了两个，正片叠加（overlay）和滤色（screen），其中，滤色作用于 radial-gradient 渐变，将其内的颜色成分中的黑色 black 去掉，所以融合的效果特别明亮。可以点击示范下的按钮，将滤色 screen 滤镜去掉，也就是说，两个图像都是用正片叠加，看看效果是不是暗淡许多，如果是，那么，是径向渐变中 black 颜色的作用——它没有被滤掉，仅是因叠加融合而改变了色彩状态。</p>
<p>小结：本节主要探讨多重背景图像设置中背景颜色的参与细节，这是一个相对抽象的问题，并且，由于理解能力所限，一些解释不能保证十分准确，抑或存在理解上的错误亦未可知。</p>
</div>
<script>
btnDarken.onclick = () => {
dark.style.setProperty('--blend', btnDarken.value);
btnDarken.value === 'multiply' ?
(btnDarken.value = 'normal', btnDarken.textContent = '恢复 background-blend-mode 为 normal') :
(btnDarken.value = 'multiply', btnDarken.textContent = '启用 background-blend-mode 为 multiplay');
};
btnOverlay.onclick = () => {
gradient.style.setProperty('--blend1', btnOverlay.value);
btnOverlay.value === 'overlay,screen' ?
(btnOverlay.value = 'overlay', btnOverlay.textContent = '只使用 overlay 融合滤镜') :
(btnOverlay.value = 'overlay,screen', btnOverlay.textContent = '恢复 overlay和screen 复合滤镜');
};
</script> 都习惯了颜色放在背景图前，原来它还可以放在后面，还能加小角逗号。 “我个人坚持认为：背景颜色在使用背景图像融合技术时会作用于整体融合效果”
坚决支持黑黑的观点{:4_187:} 下面的图像黑黑虽然是为了说明的，但是首先感受到的是融合后的效果好漂亮啊{:4_173:} 红影 发表于 2024-3-16 23:18
“我个人坚持认为：背景颜色在使用背景图像融合技术时会作用于整体融合效果”
坚决支持黑黑的观点{:4_187: ...
这个支持没用的，不过这个问题也的确存在争论 红影 发表于 2024-3-16 23:14
都习惯了颜色放在背景图前，原来它还可以放在后面，还能加小角逗号。
有时候可以把它当成一个层来看待，多背景图像时，颜色放后是明智的选择，否则会出现很多困扰。 红影 发表于 2024-3-16 23:20
下面的图像黑黑虽然是为了说明的，但是首先感受到的是融合后的效果好漂亮啊
实际使用时根据效果来定夺选用哪一个具体滤镜 马黑黑 发表于 2024-3-16 23:32
这个支持没用的，不过这个问题也的确存在争论
既然有争论，支持肯定有用啊{:4_173:} 马黑黑 发表于 2024-3-16 23:34
有时候可以把它当成一个层来看待，多背景图像时，颜色放后是明智的选择，否则会出现很多困扰。
嗯嗯，记下了{:4_204:} 马黑黑 发表于 2024-3-16 23:34
实际使用时根据效果来定夺选用哪一个具体滤镜
使用滤镜总能带来美妙的效果呢{:4_187:} 教程清晰好懂，用于做演示的图片外的双线小边框也十分好看，有立体感。。 南无月 发表于 2024-3-17 16:45
教程清晰好懂，用于做演示的图片外的双线小边框也十分好看，有立体感。。
边框不是核心 马黑黑 发表于 2024-3-17 19:30
边框不是核心
细节见真章。背景颜色和滤镜的更细致{:4_173:} 南无月 发表于 2024-3-17 19:37
细节见真章。背景颜色和滤镜的更细致
边框随意做的 马黑黑 发表于 2024-3-17 19:39
边框随意做的
随意的就很好看。两根线，一个圆角一个直角。。{:4_173:} 南无月 发表于 2024-3-17 19:49
随意的就很好看。两根线，一个圆角一个直角。。
{:4_190:}
页:
[1]