码农教程 - 一技在手,衣食无忧! tools

目录

CSS background-blend-mode 属性

❮上一节 完整的CSS参考 下一节❯

示例

将背景图片的混合模式指定为"lighten"：

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

下面有更多 "亲自试一试" 示例。

定义和用法

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

展示演示❯

默认值： 普通的
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.backgroundBlendMode="screen"

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
background-blend-mode 35.0 79.0 30.0 7.1 22.0

CSS 语法

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

属性值

Value Description Demo
normal This is default. Sets the blending mode to normal Demo ❯
multiply Sets the blending mode to multiply Demo ❯
screen Sets the blending mode to screen Demo ❯
overlay Sets the blending mode to overlay Demo ❯
darken Sets the blending mode to darken Demo ❯
lighten Sets the blending mode to lighten Demo ❯
color-dodge Sets the blending mode to color-dodge Demo ❯
saturation Sets the blending mode to saturation Demo ❯
color Sets the blending mode to color Demo ❯
luminosity Sets the blending mode to luminosity Demo ❯

更多示例

示例

指定混合模式为"multiply"：

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

示例

指定混合模式为"screen"：

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

示例

指定混合模式为"overlay"：

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

示例

指定混合模式为"darken"：

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

示例

指定混合模式为"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;
}
亲自试一试 »

示例

指定混合模式为"saturation"：

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

示例

指定混合模式为"color"：

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

示例

指定混合模式为"luminosity"：

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

示例

指定混合模式为"normal"：

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

相关页面

CSS教程：CSS 背景


❮上一节 完整的CSS参考 下一节❯