CSS background-blend-mode 属性-之路教程

CSS background-blend-mode 属性值说明

值	描述
normal	将混合模式设置为正常。
multiply	设置混合模式为multiply。
screen	将混合模式设置为屏幕。
overlay	将混合模式设置为叠加。
darken	将混合模式设置为DAMADEN。
lighten	将混合模式设置为亮起。
color-dodge	将混合模式设置为Color-Dodge。
saturnation	将混合模式设置为饱和度。
color	将混合模式设置为颜色。
luminosity	将混合模式设置为亮度。

CSS background-blend-mode 属性

background-blend-mode 是一个 CSS 属性，它定义了背景图像彼此之间以及与背景颜色的混合。

它有 10 个值：normal、multiply、screen、overlay、darken、lighten、color-dodge、saturation、color、luminosity。
默认值为正常。

如果有多个背景图层并且它们具有指定的混合模式列表，则应以与背景图像相同的顺序应用 background-blend-mode。
如果没有足够的值来匹配层数，则必须重复值列表，直到有足够的值。

对于混合元素，可以使用 background-blend-mode 属性。

初始值	normal
应用于	所有元素。它还适用于::first-letter 和 ::first-line 伪元素
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.BackgroundBlendMode =“Luminosity”;

语法

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

background-blend-mode 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/onitroad-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

在以下示例中，尝试查看背景图像是如何混合的：

具有“screen”值的 background-blend-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/onitroad-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

具有 "color-dodge" 值的 background-blend-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/onitroad-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

具有“multiply”值的 background-blend-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/onitroad-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

具有 "overlay" 值的 background-blend-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/onitroad-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

具有“darken”值的 background-blend-mode 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/onitroad-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

具有“饱和度”值的背景混合模式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("/build/images/onitroad-logo-black.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

日期：2020-06-02 22:14:24 来源：oir作者：oir

←CSS backface-visibility 属性

CSS background 背景属性→