加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS background-blend-mode 属性 详解

css3基础 2022-07-14 15:52:16小码哥的IT人生shichen

CSS background-blend-mode 属性

定义和用法

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

另请参阅：

CSS 教程：CSS 背景

实例

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

div {
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: lighten;
}
</style>
</head>
<body>
<h1>background-blend-mode 属性</h1>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您可以在页尾看到更多 TIY 实例。

CSS 语法

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（亮度）。

技术细节

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

更多实例

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: multiply;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: screen;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: overlay;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: darken;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: color-dodge;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: saturation;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: color;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: luminosity;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

示例代码：

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

div {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("/i/photo/tree.png"), url("/i/paper.jpg");
  background-blend-mode: normal;
}
</style>
</head>
<body>
<div id="myDIV"></div>
<p><b>注释：</b>79 之前的 Edge 不支持 background-blend-mode 属性。</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

浏览器支持

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
35.0 79.0 30.0 7.1 22.0

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024