CSS知识：后台混合模式打造特效

terry 2年前 (2023-09-27) 阅读数 66 #数据结构与算法

前端开发是否无法处理设计师使用的Photoshop图层混合模式，现在我们可以用CSS实现网页上的图像混合。

1. 简介

如果说“一图胜千言”，那么多张图片混合在一起所产生的效果胜过千言。同样，CSS混合模式提供的设计可能性远远超出你的想象。您听到的 CSS 混合模式是现代浏览器广泛支持的三个 CSS 属性。这三个属性包括：

background-blend-mode ：用于混合元素的背景图案、渐变和颜色
isolation：用户阻止某些元素混合到 mix-blend-mode

不过，本文主要讨论❀♷背景。 Blend -mode 通过这个最受支持的属性，您可以实现以前只有 Photoshop 才能实现的引人注目的效果。？ 4. Lea Verou 展示了如何通过多种渐变属性创建令人惊叹的图案，例如棋盘、砖块和星形布局。但是现在我们可以使用background-blend-mode属性创建更多样的效果。

1。光谱背景

通过覆盖三层颜色渐变，我们创建了几乎全波段的光谱图像并将其展示在所有人面前。

.spectrum-background {
    background:
        linear-gradient(red, transparent),
        linear-gradient(to top left, lime, transparent),
        linear-gradient(to top right, blue, transparent);
    background-blend-mode: screen;
}

以前，以上效果只能通过图像来实现，而且图像非常大。通过CSS只需要几行代码就可以达到这样的效果，更不用说节省HTTP请求数据量了。

2。条纹网格背景

同样，我们可以通过这个属性实现有趣的条纹网格背景：

.plaid-background {
    background:
        repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 25%,
            dodgerblue 0,
            dodgerblue 50%
       ),
       repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 25%,
            tomato 0,
            tomato 50%
        ),
        repeating-linear-gradient(
            transparent 0,
            transparent 25%,
            gold 0,
            gold 50%
        ), white;
    background-blend-mode: multiply;
    background-size: 100px 100px;
}

3。围绕背景画圈

让我们尝试一些不同的东西，这次使用径向渐变在背景周围创建一个圆圈：

.circles-background {
    background:
        radial-gradient(
            khaki 40px,
            transparent 0,
            transparent 100%
        ),
        radial-gradient(
            skyblue 40px,
            transparent 0,
            transparent 100%
        ),
        radial-gradient(
            pink 40px,
            transparent 0,
            transparent 100%
        ), snow;
    background-blend-mode: multiply;
    background-size: 100px 100px;
    background-position: 0 0, 33px 33px, -33px -33px;
}

4。更多背景

在 Yoksel 和 Una Kravets 的帮助下，我创建了混合模式下的渐变图案集合，您可以将其快速添加到您使用过的网站中。

3。图片效果与background-blending-mode组合

由于background-image允许我们为一个元素添加多个渐变，我们也可以在同一个元素中设置多个背景图片。如果几张图片结合了background-blend-mode和filter属性，图片的效果会更有趣：

1。素描效果

我们可以通过CSS创建左侧的图像该图像看起来像一个素描。无需 Photoshop、HTML 画布、WebGL 或 JavaScript 库，只需 5 个 CSS 属性。

首先是HTML代码：

<div class=”pencil-effect”></div>

然后添加两个chapel.jpg图像：

.pencil-effect {
    background:
        url(chapel.jpg),
        url(chapel.jpg);
    background-size: cover;
}

下图中，左边的是我们第一步的效果：现在我们添加混合模式。在上面，效果就像2。 image:

background-blend-mode: difference;

您会看到第二张图像是全黑的。差异此混合模式会删除两个图像中各个像素之间的暗像素。如果你仍然感到困惑，我们还可以使用 background-position 和 calc() 来解决一些位置差异。

background-position:
    calc(50% — 1px) calc(50% — 1px),
    calc(50% + 1px) calc(50% + 1px);

调整两张背景图的位置偏移后，我们现在可以在图像上看到场景的边界，如图3所示：

最后，通过添加滤镜属性，我们进行反转并求和图片调整透明度和亮度：

filter: brightness(3) invert(1) grayscale(1);

完整代码片段如下：

.pencil-effect {
    background:
        url(photo.jpg),
        url(photo.jpg);
    background-size: cover;
    background-blend-mode: difference;
    background-position:
        calc(50% — 1px) calc(50% — 1px),
        calc(50% + 1px) calc(50% + 1px);
    filter: brightness(3) invert(1) grayscale(1);
}

最终效果如下图4如图：

2.表格效果

基于上面的草图效果，我们通过，通过设置一个CSS属性，就可以实现上图2所示的表格效果。直接将过滤器属性设置为invert(1)。

3。夜视效果

然后使用 CSS 混合模式使图像看起来就像您通过夜视设备看到的一样。首先，设置背景图片和相关样式（如图1所示）：

background: url(moose.jpg);
background-size: cover;
background-position: center;

现在让我们设置渐变和混合模式。这里，添加了一个带有一定透明度的黑色径向渐变：

background:
    url(moose.jpg),
    radial-gradient(
        rgba(0,255,0,.8),
        black
    );
background-blend-mode: overlay;

不错，但仍然可以优化。。我有几种方法可以通过添加一些扫描线和重复图块来使图像更可信（如图 3 所示）：

background:
    url(moose.jpg),
    radial-gradient(
        rgba(0,255,0,.8),
        black
    ),
    repeating-linear-gradient(
        transparent 0,
        rgba(0,0,0,.2) 3px,
        transparent 6px
    );

完整代码是：

.night-vision-effect {
    background:
        url(moose.jpg),
        radial-gradient(
            rgba(0,255,0,.8),
            black
        ),
        repeating-linear-gradient(
            transparent 0,
            rgba(0,0,0,.2) 3px,
            transparent 6px
        );
    background-blend-mode: overlay;
    background-size: cover;
 }

4。浏览器兼容性和优雅降级

好消息是background-blend-mode兼容Firefox、Chrome和Opera浏览器。不过，Safari 支持上面列出的所有效果。 Safari 目前不支持混合模式：饱和度、色调、颜色颜色 。 IE浏览器也不支持。这意味着我们必须考虑不支持混合模式的浏览器，这可以通过 CSS @supports 变得更容易。在第一种情况下，我们可以通过@supports检测混合模式支持，如果不支持则降级：

.spectrum-background {
    background: gray;

@supports (background-blend-mode: screen) { background: Linear-gradient (red,透明) , Lineargradient (左上，石灰，透明），线性渐变（右上，蓝色，透明）；背景混合mode：屏幕； } }

我们可以检测到几个CSS属性，如下：

.pencil-effect {
    background-image: url(photo.jpg);
    background-size: cover;

@supports (background-blend-mode: Difference) and (filter: invert(1)) { background-image: url(photo.jpg ) ,网址（照片.jpg）；背景混合mode：差异；背景位置： calc(50% — 1px) calc(50% — 1px), calc(50% + 1px) calc(50% + 1px);滤镜：亮度（3）反转（1）灰度（1）； } }

最后，我们可以安全地使用混合模式为网页图像带来更多幻想。

作者：腾讯深海
链接：https://juejin.im/post/5bd6c5896fb9a05d344807cb
来源：掘金作者财产商业转载请联系作者授权。非商业转载请注明来源。