醉美水芙蓉 发表于 2026-3-23 21:44:00

马黑黑老师纯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>

fenjiangfan 发表于 7 天前

支持佳作，期待后续更新

degaodi 发表于 6 天前

很给力。。。。很喜欢

changsha26tiao 发表于 4 天前

赞，顶帖真的超有魅力

xixixi 发表于 4 天前

感谢分享，引发无限遐想

jiajiazhuangcun 发表于 4 天前

感谢分享，收获知识财富

lanmeigui 发表于 4 天前

感谢分享，收获满满感动

xixixi 发表于 4 天前

分享超棒呀，点赞支持啦

equso 发表于 3 天前

看帖子的要发表下看法

zhongguochao2 发表于 3 天前

支持分享，文章独具匠心
页: [1] 2
查看完整版本: 马黑黑老师纯CSS背景设计思路：图片+渐变叠加+混合模式