参考手册
CSS 属性大全
background-attachment
background-clip
返回 CSS 属性大全

CSS background-blend-mode 属性

CSS background-blend-mode 属性定义该元素的背景图片，以及背景色如何混合。

混合模式应该按 background-image 属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

实例

把背景图像的混合模式指定为 "lighten"（变亮）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: lighten;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <h1>background-blend-mode 属性</h1>
  18. <div id="myDIV"></div>
  20. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  22. </body>
  23. </html>
运行一下

定义和用法

background-blend-mode 属性定义每个背景层（颜色和/或图像）的混合模式。

默认值：normal
继承：否
动画制作：不支持。请参阅：动画相关属性。
版本：CSS3
JavaScript 语法：object.style.backgroundBlendMode="screen"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
background-blend-mode35.079.030.07.122.0

CSS 语法

  1. background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
属性值
值描述
normal默认。把混合模式设置为普通。
multiply把混合模式设置为 multiply（乘）。
screen把混合模式设置为 screen（屏幕）。
overlay把混合模式设置为 overlay（覆盖）。
darken把混合模式设置为 overlay（覆盖）。
lighten把混合模式设置为 lighten（变亮）。
color-dodge把混合模式设置为 color-dodge（颜色减淡）。
saturation把混合模式设置为 saturation（饱和度）。
color把混合模式设置为 color（颜色）。
luminosity把混合模式设置为 luminosity（亮度）。

更多实例

把混合模式指定为 "multiply"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: multiply;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "screen"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/i/photo/tree.png"), url("/i/paper.gif");
  10.   background-blend-mode: screen;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "overlay"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: overlay;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "darken"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: darken;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "color-dodge"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: color-dodge;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "saturation"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: saturation;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "color"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: color;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "luminosity"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: luminosity;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

把混合模式指定为 "normal"：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myDIV {
  6.   width: 400px;
  7.   height: 400px;
  8.   background-repeat: no-repeat, repeat;
  9.   background-image: url("/images/img_tree.gif"), url("/images/paper.gif");
  10.   background-blend-mode: normal;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <div id="myDIV"></div>
  18. <p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
  20. </body>
  21. </html>
运行一下

相关页面

CSS 教程：CSS 背景

background-attachment
background-clip

分类导航