html5元素的多重背景

马黑黑 · 发表于 2023-4-17 10:12

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

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

x

HTML5支持多重背景，但当背景重叠时，会存在前面设置的背景覆盖后面设置的背景的现象。为此，如果想让多重背景和平共处，我们有两种处理方法：其一，使用 background-blend-mode 背景融合技术，通过不同滤镜对背景层颜色的处理，产生奇妙的背景混合与融合效果；其二，布置好背景层的位置，令其不彼此重叠或因需要部分重叠。

方法一，融合技术，不是本帖想要讨论的，感兴趣的朋友可以访问以下网页，获取更多的相关知识与技能：

CSS中的合成与混合模式_CSS混合模式教程_W3cplus

方法二，错位背景图层是我们的话题。考虑一下以下代码：

<style>
.son {
width: 400px;
height: 200px;
border: 1px solid gray;
background:
radial-gradient(red, cyan) 26% 10% / 60px 60px no-repeat,
linear-gradient(transparent, red) 46% 32% / 1.8px 80px no-repeat,
conic-gradient(green, yellow, blue) 75% 50% / 80px 80px no-repeat;
}
</style>
<div class="son"></div>

复制代码

这里，我们设置了一个 400*200 像素的盒子 .son，我们给它设计一个边框以便方便对之进行观察。接着是重点：我们通过三种渐变模式，即线性渐变、径向渐变、角向渐变分别设置了三个背景层，各个背景层的位置使用百分比设置了不同的xy坐标，背景层的尺寸宽高也各不相同，且，很重要的，这些背景层设置为 no-repeat 属性，即不重复。这样，个背景层都会呈现在 .son 盒子之上，互不干扰。

渐变背景是一种特殊的图片，如果使用真实图片做盒子的背景，我们可以用 url('图片地址') 代替上面的 xxxx-gradient(...) 语句，各句后面的位置、大小等参数形式不变。

效果请看楼下

马黑黑 · 发表于 2023-4-17 10:12

马黑黑 · 发表于 2023-4-17 10:20

马黑黑 · 发表于 2023-4-17 10:23

上楼效果，使用多重线性背景设置两个子元素的背景层，令其top位置不一样，然后在父元素内做向下移动，彼此衔接。代码：

<style>
#papa {
width: 600px;
height: 460px;
background: #333;
overflow: hidden;
position: relative;
--bg: tan;
}
.sons {
position: absolute;
width: 100%;
height: 100%;
background: var(--bg);
animation: flow 5s infinite linear;
}
.sons:nth-of-type(1) { top: -100%; text-align: right; }
@keyframes flow {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
</style>
<div id="papa">
<div class="sons"></div>
<div class="sons"></div>
</div>
<script>
let total = 50, bgStr = '';
for(let i = 0; i < total; i ++) {
bgStr += `linear-gradient(transparent, silver) ${Math.random() * 100}% ${Math.random() * 100}% / 1px 80px no-repeat`;
bgStr += i < total - 1 ? ' ,' : '';
}
papa.style.setProperty('--bg', bgStr);
</script>

复制代码

马黑黑 · 发表于 2023-4-17 10:49

实现类似上面的效果，css-doodle 可以这样做：

<css-doodle>
:doodle {
@grid: 1x3 / 600px 400px;
background: #333;
}
@size: 100% 150%;
position: absolute;
background: @m(100, (linear-gradient(transparent, @p(#ADD8E6@repeat(2, @p([0-9a-f])), #FFFAFA@repeat(2, @p([0-9a-f])))) @r(0%, 100%) @r(0%, 100%) / @r(2px) @r(80px) no-repeat));
animation: float 20s linear calc(-20s / @size() * @i()) infinite;
@keyframes float {
from { transform: translateY(-100%); }
to { transform: translateY(100%); }
}
</css-doodle>