马黑黑 发表于 2026-3-20 20:25

纯CSS背景设计思路：图片+渐变叠加+混合模式

<style>
        .artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
        .artBox p { margin: 10px 0; }
        .artBox h1, .artBox h2 { margin: 8px 0; }
        .artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
        .artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
        .artBox pre code { padding: 0; background: none; }
        .artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
</style>

<div class="artBox">
    <p>有时候为了烘托氛围、突出中心，给背景图片做适当修饰是一个不错的思路。利用CSS的渐变+混合技术，可以简单实现这一设想。</p>
    <p>考虑如下代码：</p>
    <pre><code>background:
url('图片地址') no-repeat center/cover,
linear-gradient(30deg, red, red 20%, transparent 25%),
linear-gradient(30deg, transparent, transparent 80%, red 95%),
linear-gradient(150deg, red, red 5%, transparent 20%),
linear-gradient(150deg, transparent, transparent 75%, red 80%),
#000
;
background-blend-mode: difference;</code></pre>
    <p>解释：</p>
    <ul>
      <li>
            <p>
                <code>url()</code> 函数用于加载 background 的图片，其后以简写方式设置背景图片重复方式、定位与渲染形式，属于
                <strong>背景图层</strong>（background-image）；
            </p>
      </li>
      <li>
            <p>
                <code>linear-gradient()</code> 函数给背景加载线性渐变，属于
                <strong>背景图层</strong>（background-image），共四个：
            </p>
            <ul>
                <li>左下角</li>
                <li>右上角</li>
                <li>左上角</li>
                <li>右下角</li>
            </ul>
      </li>
      <li>
            <p>
                <code>#000</code> 背景色（background-color），防止图片失效时显示空白，也可以借之影响整体图层混合效果，当然也可以不设置。
                <strong>不属于背景图层</strong>部分，是底色，所有图层均叠加在它上面；
            </p>
      </li>
      <li>
            <p>
                <code>background-blend-mode</code> 属性，定义背景图层混合模式，作用于对应的 background-image 背景图层（补全规则后续讨论）
            </p>
      </li>
    </ul>
    <p>渐变背景分别使用两个角度（30deg和150deg）以形成左右对称的修饰效果，渐变的色标位置两种颜色之间的比例有一个过渡区间以期平滑过渡。</p>
    <p>这样写渐变背景逻辑清晰，但代码行数偏多，可以将同一角度的渐变进行合并：</p>
    <pre><code>linear-gradient(30deg, red, red 20%, transparent 25%, transparent 80%, red 95%, red 0),
    linear-gradient(150deg, red, red 5%, transparent 20%, transparent 75%, red 95%, red 0),</code></pre>
    <p>合并后渐变色标位置有所改变，主要是每一种角度渐变的后面部分。</p>
    <p>
      <strong>背景融合模式</strong>仅取一个值即单值，意味所有图层使用相同的混合模式，最后的纯颜色即 background-color 是底色，不参与图层混合但颜色的设置会影响图层的混合渲染效果。可以为每一图层设置单独的混合模式，是否生效或是否达到预期效果取决于该图层与混合模式是否适宜以及底色设置与否、设置了什么颜色。多值背景融合的设置依据代码流从前到后的顺序作用于对应顺序的每一个背景图层，例如下例：
    </p>
    <pre><code>background:
linear-gradient(orange, red),            /* 图层1 */
linear-gradient(blue, pink),             /* 图层2 */
url('图片地址1') no-repeat center/cover, /* 图层3 */
url('图片地址2') no-repeat center/cover, /* 图层4 */
green                                    /* background-color */
;
background-blend-mode:
lighten, /* 作用于图层1 */
hue,   /* 作用于图层2 */
screen， /* 作用于图层3 */
overlay/* 作用于图层4 */
;</code></pre>
    <p>如果
      <code>background-blend-mode</code> 只设置前两个值，则第三个图层值为 light、第四个图层值为 hue，按已定义的融合值顺序循环使用；值多于图层时，多出的值将被忽略。
    </p>
    <blockquote>
      <p>
            <strong>关于简写属性 background 及其他</strong>
      </p>
      <p>语法 ：
            <code>background: 图层1, 图层2, ..., 图层N, 背景色;</code>
      </p>
      <p>说明 ：背景图片、渐变视为图层；背景色总是放在最后（但非简写时顺序不论）。</p>
      <p>争议 ：有一种观点认为 background-color 也参与图层混合并可为之设置融合模式，值得商榷。个人认为它不具备图层属性，因此给它设置混合模式无效，但它的颜色设置，的的确确会影响整体融合效果，原因为它是底色，所有混合而成的融合效果均在其上展开。</p>
    </blockquote>
    <p>&#128171; 上述思路可以扩展、修改、完善，也可以使用全新的修饰思路，例如用
      <code>mask</code> 遮罩替代背景叠加和背景混合。总而言之，CSS留给我们的创意空间十分广阔，善于想象并具备实现能力，神奇的特效总会在不经意间创造出来。
    </p>
    <p>【实例】
      <a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=91661" title="点击访问">大海啊故乡</a>
    </p>
</div>

红影 发表于 2026-3-20 22:13

在《大海啊故乡》的帖子里，使用 css 设计，就达到了四角被度上颜色，留出了中间菱形部位，突出了主题。
正像黑黑说的，“CSS留给我们的创意空间十分广阔”，从那个帖子里看到了实际效果{:4_187:}

马黑黑 发表于 2026-3-20 22:33

红影 发表于 2026-3-20 22:13
在《大海啊故乡》的帖子里，使用 css 设计，就达到了四角被度上颜色，留出了中间菱形部位，突出了主题。
...

中国CSS教父大漠就是特别爱用CSS实现很多功能，可惜他的很多文章得付费才能阅读

红影 发表于 2026-3-21 18:41

马黑黑 发表于 2026-3-20 22:33
中国CSS教父大漠就是特别爱用CSS实现很多功能，可惜他的很多文章得付费才能阅读

也挺好啊，知识有价了才会有人愿意付出{:4_187:}

马黑黑 发表于 2026-3-21 19:51

红影 发表于 2026-3-21 18:41
也挺好啊，知识有价了才会有人愿意付出

最初大漠大佬是纯粹的CSS教父

红影 发表于 2026-3-21 21:07

马黑黑 发表于 2026-3-21 19:51
最初大漠大佬是纯粹的CSS教父

太厉害了{:4_199:}

马黑黑 发表于 2026-3-21 22:46

红影 发表于 2026-3-21 21:07
太厉害了

对CSS的理解非常透彻

红影 发表于 2026-3-22 17:12

马黑黑 发表于 2026-3-21 22:46
对CSS的理解非常透彻

这样的大佬很名副其实。

马黑黑 发表于 2026-3-22 18:06

红影 发表于 2026-3-22 17:12
这样的大佬很名副其实。

那是当然

红影 发表于 2026-3-22 21:25

马黑黑 发表于 2026-3-22 18:06
那是当然

给他们点赞。{:4_204:}

马黑黑 发表于 2026-3-23 08:28

红影 发表于 2026-3-22 21:25
给他们点赞。
点三十二个赞

小辣椒 发表于 2026-3-23 21:13

这个好像对我有用的

小辣椒 发表于 2026-3-23 21:13

可以增加画面的效果

马黑黑 发表于 2026-3-23 21:32

小辣椒 发表于 2026-3-23 21:13
可以增加画面的效果

还行

马黑黑 发表于 2026-3-23 21:32

小辣椒 发表于 2026-3-23 21:13
这个好像对我有用的

也许

红影 发表于 2026-3-23 22:35

马黑黑 发表于 2026-3-23 08:28
点三十二个赞

为什么是这个数字{:4_173:}

马黑黑 发表于 2026-3-23 23:04

红影 发表于 2026-3-23 22:35
为什么是这个数字

这时网络俗语

红影 发表于 2026-3-25 16:14

马黑黑 发表于 2026-3-23 23:04
这时网络俗语

哦，不明觉厉{:4_203:}

马黑黑 发表于 2026-3-25 17:17

红影 发表于 2026-3-25 16:14
哦，不明觉厉

不过没有什么luan用{:4_170:}

红影 发表于 2026-3-26 22:19

马黑黑 发表于 2026-3-25 17:17
不过没有什么luan用

能用来回帖也是作用呢。
页: [1] 2
查看完整版本: 纯CSS背景设计思路：图片+渐变叠加+混合模式