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

CSS mix-blend-mode 属性

mix-blend-mode 属性定义了元素内容与其直接父背景的混合。
你需要有背景图像、背景颜色或者 <img> 来混合它。

在 CSS 中，有 16 种混合模式可用。
如果在元素上设置了“正常”（默认值）以外的值，则会在该元素上创建新的堆叠上下文。
然后应将新形成的组与包含元素的堆叠上下文混合。
该元素不会与堆叠上下文之外的内容混合。

任何导致创建堆叠上下文的属性都会对混合产生影响。

我们可以使用隔离属性来隔离元素。

如果要将元素的背景图像混合在一起，可以使用 background-blend-mode 属性。

初始值	normal
应用于	所有元素。
继承	无效
可动画的	无效
版本	CSS1
DOM 语法	object.style.mixblendMode =“exclusion”;

语法

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity | initial | inherit;

混合模式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: multiply;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode 属性示例</h2>
    <h3>Mix-blend-mode: multiply</h3>
    <div class="example">
      <img src="/bg.jpg" alt="Tree">
    </div>
  </body>
</html>

具有“屏幕”值的混合模式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: screen;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode 属性示例</h2>
    <h3>Mix-blend-mode: screen</h3>
    <div class="example">
      <img src="/bg.jpg" alt="Tree">
    </div>
  </body>
</html>

具有“color-dodge”值的混合模式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: color-dodge;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode 属性示例</h2>
    <h3>Mix-blend-mode: color-dodge</h3>
    <div class="example">
      <img src="/bg.jpg" alt="Tree">
    </div>
  </body>
</html>

具有“色调”值的混合模式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The 文档的标题</title>
    <style>
      .example {
        background-color: #8ebf42;
        height: 800px;
      }
      img {
        width: 100%;
        height: auto;
        float: left;
        mix-blend-mode: hue;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode 属性示例</h2>
    <h3>Mix-blend-mode: hue</h3>
    <div class="example">
      <img src="/bg.jpg" alt="Tree">
    </div>
  </body>
</html>

具有“正常”值的混合模式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 500px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: normal;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode 属性示例</h2>
    <h3>Mix-blend-mode: normal</h3>
    <div class="example">
      <img src="/bg.jpg" alt="Tree" width="300" height="300">
    </div>
  </body>
</html>

具有“hard-light”值的混合模式示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: hard-light;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode 属性示例</h2>
    <h3>Mix-blend-mode: hard-light</h3>
    <div class="example">
      <img src="/bg.jpg" alt="Tree" width="300" height="300">
    </div>
  </body>
</html>

具有“差异”值的混合模式示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .example {
        background-color: #ff0000;
        height: 400px;
      }
      img {
        width: 50%;
        height: auto;
        float: left;
        mix-blend-mode: difference;
      }
    </style>
  </head>
  <body>
    <h2>Mix-blend-mode 属性示例</h2>
    <h3>Mix-blend-mode: difference</h3>
    <div class="example">
      <img src="/bg.jpg" alt="Tree" width="300" height="300">
    </div>
  </body>
</html>

CSS mix-blend-mode 属性值说明

值	描述
normal	将混合模式设置为正常。这是此属性的默认值。
multiply	设置混合模式为multiply。
screen	将混合模式设置为屏幕。
overlay	将混合模式设置为叠加。
darken	将混合模式设置为DAMADEN。
lighten	将混合模式设置为亮起。
color-dodge	将混合模式设置为Color-Dodge。
color-burn	将混合模式设置为Color-Burn。
exclusion	将混合模式设置为排除。
difference	将混合模式设置为差异。
hue	将混合模式设置为色调。
saturation	将混合模式设置为饱和度。
color	将混合模式设置为颜色。
luminosity	将混合模式设置为亮度。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

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

←CSS min-width 属性

CSS :not() 伪类→

语法