CSS 背景融合效果

慕仲卿
2,145 阅读6分钟

本文从两个常见的 CSS 属性 background-color和background-image 入手，思考它们之间的关系，进而引出两个 CSS 属性 background-blend-mode 和 mix-blend-mode。然后着重介绍了这个属性的使用方法和作用。

1. background-color和background-image

在CSS中，background-color和background-image属性共同用于设置元素的背景，但它们各自的作用和用途有所不同。

1.1 background-color

  • background-color属性用于定义元素背景的颜色。
  • 它可以设置为预定义的颜色名称（如red、blue）、十六进制颜色代码（如#FF0000）、RGB值（如rgb(255, 0, 0)）或RGBA值（包含透明度，如rgba(255, 0, 0, 0.5)）。
  • 如果元素没有背景图像或者背景图像无法显示，background-color提供了一个后备的颜色显示，确保元素背景不会透明。

1.2 background-image

  • background-image属性用于设置元素的背景图像。
  • 它可以接受图片文件的路径，如JPEG、PNG、GIF、SVG等格式。
  • 背景图像可以与背景颜色共存，也可以单独使用。如果背景图像无法显示（比如路径错误或图片格式不被支持），元素将不会显示任何背景，除非有background-color作为后备。

1.3 两者之间的关系

  • 1. 层叠顺序：通常情况下，背景图像会在背景颜色之上显示，因为它们在层叠上下文中是按照CSS中定义的顺序堆叠的。
  • 2. 透明度：背景图像的透明度可能会影响到下方的背景颜色。如果图像的某些部分是半透明的，背景颜色可以透过这些部分显示出来。
  • 覆盖与显示：如果背景图像的大小（background-size）设置为cover，它可能会完全覆盖背景颜色。如果设置为contain，图像则可能会部分显示在背景颜色之上。
  • 3. 多重背景：CSS3允许你为一个元素设置多个背景图像，它们按照在CSS中出现的顺序堆叠，位于最顶部的背景图像将覆盖在下面的图像。
  • 4. 合成与混合：通过background-blend-mode属性，可以控制背景层之间的混合方式，例如，将背景图像与背景颜色以特定方式混合。

1.4 示例代码

在上面4种关系中，最好玩，最有趣的我认为是第四个。background-blend-mode 属性可以在background-color和background-image属性之间建立起更加复杂的关系，如下所示：

.element {
  background-color: #f0f0f0; /* 后备颜色 */
  background-image: url('path/to/image.png'), url('path/to/pattern.png');
  background-blend-mode: multiply; /* 图像与颜色的混合方式 */
  background-size: cover, auto; /* 第一个图像覆盖整个元素，第二个图像按比例适应 */
}

2. 背景混合模式 background-blend-mode

首先，让我们从背景图和背景颜色的混合开始。假设我们有一个元素，背景颜色是半透明紫色，背景图是强哥。通常，背景图会覆盖掉背景颜色，但通过使用CSS的 background-blend-mode 属性，我们可以调整这种覆盖关系。

.element {
    background: #783c9099;
    /* 后备颜色 */
    background-image: url('./强.jpg');
    background-blend-mode: multiply;
    /* 图像与颜色的混合方式 */
    background-size: cover;
    background-position: 0px 0px;
    /* 第一个图像覆盖整个元素，第二个图像按比例适应 */
    width: 500px;
    height: 257px;
    background-repeat: no-repeat;
}

效果如下：

image.png

CSS的 background-blend-mode 属性不仅可以混合背景颜色和背景图，它甚至还可以混合多个背景图。下面的一个 DIV 元素中设置了两张背景图，分别是强哥和一把刀，使用这个属性就可以将它们混合起来：

.element {
    background-color: #f0f0f0;
    background-image: url(./刀.webp), url(./强.jpg);
    background-blend-mode: exclusion;
    filter: contrast(0.5);
    background-size: 20% 20%, cover;
    background-position: 198px 91px, 0px 0px;
    width: 500px;
    height: 257px;
    background-repeat: no-repeat;
}

效果如下：

image.png image.png

3. 深入了解 mix-blend-mode 混合模式

如果说CSS的 background-blend-mode 属性可以实现某个 DOM 元素自身背景图之间或者背景图和背景色之间的混合，那么 mix-blend-mode 就可以实现不同元素背景图之间的混合。 mix-blend-mode属性代表一种算法，它将两个颜色通过特定算法混合，产生新的颜色。

创造层次效果

利用mix-blend-mode，可以创建更复杂的层次效果。例如，可以为元素添加一个伪元素，并通过绝对定位使其覆盖在原元素上。通过调整伪元素的背景颜色和背景图，再应用相同的混合模式，可以得到一个具有不同颜色层次的图片。

.element::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 100%;
    height: 100%;
    background-image: url(./wuwuwu.gif), linear-gradient(to bottom, red, transparent);
    background-blend-mode: screen;
    mix-blend-mode: multiply;
}

.element {
    position: relative;
    background: #783c9099;
    background-image: url(./wuwuwu.gif);
    background-size: cover;
    background-position: 0px 0px;
    width: 308px;
    height: 500px;
    background-repeat: no-repeat;
}

原始图像和混合之后的图像效果如下所示：

wuwuwu.gif

在这个效果中，我们使用了 background-blend-mode 属性混合得到了一个彩色小人，然后通过 mix-blend-mode 混合得到了诡异舞蹈的最终效果。

动画与混合模式的结合

进一步，可以给这个混合后的元素添加动画效果。例如，通过设置animation属性，使元素在水平方向上进行偏移，就能创建出一种动态的故障风格效果。

文字与背景的融合

最后，将文字与背景图融合。通过调整元素的mix-blend-mode和filter属性，可以使文字与背景图更好地混合。此外，将文字设置为透明，并调整背景图的显示位置，可以让背景图仅在文字区域显现；最后提高对比度让多余文字不可见，这样就创造出独特的视觉效果。

.element::before {
    content: 'dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing dancing ';
    color: transparent;
    position: absolute;
    top: 0;
    left: 10px;
    width: 100%;
    height: 100%;
    background-image: url(./wuwuwu.gif), linear-gradient(to bottom, red, transparent);
    background-blend-mode: screen;
    mix-blend-mode: multiply;
    -webkit-background-clip: text;
    background-clip: text;
    filter: contrast(5);
}

.element {
    position: relative;
    /* background: #783c9099; */
    /* background-image: url('./wuwuwu.gif'); */
    background-size: cover;
    background-position: 0px 0px;
    width: 308px;
    height: 500px;
    background-repeat: no-repeat;
}

效果如下所示：

avatar
文章
阅读
粉丝