当前位置：首页 > article >正文

混合模式属性background-blend-mode

article 2024/11/15 11:05:55

background-blend-mode 是 CSS 中的一个属性，它允许你将背景图像与背景颜色或背景图像之间以一种特定的混合模式进行混合。这个属性为网页设计师提供了一种强大的方式来创建视觉上吸引人的背景效果，无需使用图像编辑软件或额外的图像文件。

background-blend-mode 可以应用于单个背景图像与背景颜色之间，或者当设置多个背景图像时，应用于这些图像之间。混合模式包括了许多与 Photoshop 等图像编辑软件中相同的选项，如 multiply、screen、overlay、darken、lighten 等。

语法

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

normal：默认值，表示背景图像和颜色不进行混合。
multiply：将背景图像和颜色的颜色值相乘，然后除以 255，结果是较暗的颜色。
screen：将背景图像和颜色的颜色值反转，相乘，然后除以 255，结果是较亮的颜色。
overlay：结合 multiply 和 screen 特性，取决于背景颜色的亮度。
darken：选择背景图像和颜色中较暗的部分。
lighten：选择背景图像和颜色中较亮的部分。
color-dodge：类似于屏幕模式，但会创建更亮的颜色。
color-burn：类似于乘法模式，但会创建更暗的颜色。
hard-light：类似于强光照射，根据颜色的亮度选择 multiply 或 screen 模式。
soft-light：类似于 hard-light，但效果更柔和。
difference：从较亮的颜色中减去较暗的颜色，如果结果为负，则取正值。
exclusion：类似于 difference，但对比度较低。
hue：用背景图像的色调和颜色的饱和度和亮度来创建混合色。
saturation：用背景图像的饱和度和颜色的色调和亮度来创建混合色。
color：用背景图像的色调和饱和度以及颜色的亮度来创建混合色。
luminosity：用背景图像的亮度和颜色的色调和饱和度来创建混合色。

示例

假设你有一个 HTML 元素，你想将一张图片和一种颜色以 multiply 模式混合作为背景：

<div class="blend-mode-example"></div>

.blend-mode-example {
  width: 300px;
  height: 200px;
  background-image: url('background.jpg');
  background-color: blue;
  background-blend-mode: multiply;
}