论坛 › 马黑黑教程专版 › html5元素的多重背景

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

html5元素的多重背景

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

<style>
.son22 {
        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="son22"></div>

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

<style>
#papa {
        width: 600px;
        height: 460px;
        background: #333;
        overflow: hidden;
        position: relative;
        --bg: tan;
}
.son20 {
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--bg);
        animation: flow 5s infinite linear;
}
.son20: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="son20"></div>
        <div class="son20"></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: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()), #FFFAFA@repeat(2, @p()))) @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>

可以将上面代码复制到这里运行：pencil code (freeee.ml)

红影 发表于 2023-4-17 11:10

一样的效果，css-doodle的代码要少得多了。

马黑黑 发表于 2023-4-17 11:11

红影 发表于 2023-4-17 11:10
一样的效果，css-doodle的代码要少得多了。

不过它背后以一个库

红影 发表于 2023-4-17 11:12

“且，很重要的，这些背景层设置为 no-repeat 属性，即不重复。这样，个背景层都会呈现在 .son 盒子之上，互不干扰。”
嗯嗯，记下了{:4_187:}

马黑黑 发表于 2023-4-17 11:16

红影 发表于 2023-4-17 11:12
“且，很重要的，这些背景层设置为 no-repeat 属性，即不重复。这样，个背景层都会呈现在 .son 盒子之上， ...

不过还是得根据需要是否设置背景层重复，比方做一个分隔线，我们可以让该背景层做 repeat-x 或 repeat-y，反正就是灵活应用　

红影 发表于 2023-4-17 14:01

马黑黑 发表于 2023-4-17 11:11
不过它背后以一个库

是的，有效果库做支撑的呢。

红影 发表于 2023-4-17 14:02

马黑黑 发表于 2023-4-17 11:16
不过还是得根据需要是否设置背景层重复，比方做一个分隔线，我们可以让该背景层做 repeat-x 或 repeat-y ...

一点点来，先弄明白不重复的，否则要混呢{:4_173:}

马黑黑 发表于 2023-4-17 18:00

红影 发表于 2023-4-17 14:02
一点点来，先弄明白不重复的，否则要混呢

嗯，理解了什么都好办

马黑黑 发表于 2023-4-17 18:00

红影 发表于 2023-4-17 14:01
是的，有效果库做支撑的呢。

组件就那么厉害

雨中悄然 发表于 2023-4-17 18:35

看看这课是讲了啥，竖的流星雨

马黑黑 发表于 2023-4-17 19:14

雨中悄然 发表于 2023-4-17 18:35
看看这课是讲了啥，竖的流星雨

{:4_181:}

红影 发表于 2023-4-17 19:36

马黑黑 发表于 2023-4-17 18:00
嗯，理解了什么都好办

现在知道了流星是怎么来的，想许愿的时候自己也可以做出流星来了{:4_173:}

红影 发表于 2023-4-17 19:37

马黑黑 发表于 2023-4-17 18:00
组件就那么厉害

打包好了，用起来就是爽{:4_173:}

马黑黑 发表于 2023-4-17 19:51

红影 发表于 2023-4-17 19:37
打包好了，用起来就是爽

可以偷懒，可以不明就里

马黑黑 发表于 2023-4-17 19:51

红影 发表于 2023-4-17 19:36
现在知道了流星是怎么来的，想许愿的时候自己也可以做出流星来了

挺好挺好

红影 发表于 2023-4-17 21:38

马黑黑 发表于 2023-4-17 19:51
可以偷懒，可以不明就里

对呀，非常省力。集成化的知识，这也是未来的发展方向吧。

查看完整版本: html5元素的多重背景