CSS background-blend-mode 属性

混合模式:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      background-color: yellow;
    }

    div {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, green 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: color-dodge;
    }
  </style>
</head>
<body>

  <div></div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

定义和用法

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

默认值: normal
Inherited: no
Animatable: no. 查看 animatable
版本: CSS3
JavaScript 语法: object.style.backgroundBlendMode="screen"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
background-blend-mode 35.0 不支持 30.0 7.1 22.0

CSS 语法

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

属性值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: normal;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: multiply;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: screen;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: overlay;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: darken;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: lighten;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: color-dodge;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: saturation;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: color;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #myDIV {
      width: 290px;
      height: 69px;
      background-size: 290px 69px;
      background-repeat: no-repeat;
      background-image: linear-gradient(to right, yellow 0%, white 100%), url("/examples/logo.png");
      background-blend-mode: luminosity;
    }
  </style>
</head>
<body>

  <div id="myDIV">
    蜜蜂教程 —— 有问题，找小蜜！！！
  </div>

  <p><b>注意:</b> Internet Explorer 不支持 background-blend-mode 属性。</p>

</body>
</html>

尝试一下 »

值 描述 实例
normal 默认值。设置正常的混合模式。 尝试一下 »
multiply 正片叠底模式。 尝试一下 »
screen 滤色模式。 尝试一下 »
overlay 叠加模式。 尝试一下 »
darken 变暗模式。 尝试一下 »
lighten 变亮模式。 尝试一下 »
color-dodge 颜色减淡模式。 尝试一下 »
saturation 饱和度模式。 尝试一下 »
color 颜色模式。 尝试一下 »
luminosity 亮度模式。 尝试一下 »

相关文章

CSS 教程: CSS 背景