CSS background-blend-mode

2025年3月26日 | 6分钟阅读

此 CSS 属性设置元素每个背景层（图像/颜色）的混合模式。它定义了元素的背景图像与元素背景颜色如何混合。我们可以将背景图像相互混合，或者将它们与背景颜色混合。

Edge/Internet Explorer 不支持此属性。

语法

background-blend-mode: normal | multiply | screen | color-dodge | difference | darken | lighten | saturation | luminosity | overlay | hard-light | soft-light | exclusion | hue | color-burn | color;

此属性有许多属性值。让我们通过每个示例来讨论上述混合模式。

正常

这是默认值，将属性模式设置为 normal。

multiply（乘法）

它会乘以背景颜色和背景图像，导致图像比之前更暗。它用于将混合模式设置为 multiply。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: multiply;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: multiply; </h2>
<div id="example"></div>
</center>
</body>
</html>

screen

它用于将混合模式设置为 screen，并反转图像和颜色。这种效果就像在投影屏幕上显示两张图像一样。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: screen;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: screen; </h2>
<div id="example"></div>
</center>
</body>
</html>

color-dodge

它类似于 screen 混合模式。它用于将混合模式设置为 color-dodge。此模式的最终结果是将背景颜色除以背景图像的倒数的结果。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: color-dodge;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: color-dodge; </h2>
<div id="example"></div>
</center>
</body>
</html>

difference

它用于将混合模式设置为 difference。其最终结果是将较暗的颜色减去最亮的颜色。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: difference;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: difference; </h2>
<div id="example"></div>
</center>
</body>
</html>

darken

它用于将混合模式设置为 darken。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: darken;
  
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: darken; </h2>
<div id="example"></div>
</center>
</body>
</html>

lighten

它用于将混合模式设置为 lighten。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: lighten;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: lighten; </h2>
<div id="example"></div>
</center>
</body>
</html>

饱和度

它的最终结果是上层颜色的*饱和度*，同时使用下层颜色的*色相*和*亮度*。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: saturation;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: saturation; </h2>
<div id="example"></div>
</center>
</body>
</html>

luminosity

它用于将混合模式设置为 luminosity。它的最终结果是上层颜色的*亮度*，同时使用下层颜色的*色相*和*饱和度*。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: luminosity;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: luminosity; </h2>
<div id="example"></div>
</center>
</body>
</html>

overlay（叠加）

它用于将混合模式设置为 overlay。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: overlay;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: overlay; </h2>
<div id="example"></div>
</center>
</body>
</html>

hard-light

它用于将混合模式设置为 hard-light。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: hard-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: hard-light; </h2>
<div id="example"></div>
</center>
</body>
</html>

soft-light

它用于将混合模式设置为 soft-light。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: soft-light;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: soft-light; </h2>
<div id="example"></div>
</center>
</body>
</html>

exclusion

它用于将混合模式设置为 exclusion。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: exclusion;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: exclusion; </h2>
<div id="example"></div>
</center>
</body>
</html>

hue

其结果是背景图像的*色相*与背景颜色的*亮度*和*饱和度*的组合。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: hue;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: hue; </h2>
<div id="example"></div>
</center>
</body>
</html>

color-burn

它用于将混合模式设置为 color-burn。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: color-burn;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: color-burn; </h2>
<div id="example"></div>
</center>
</body>
</html>

color

它用于将混合模式设置为 color。它保留了背景颜色的*亮度*以及背景图像的*色相*和*饱和度*。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#div1 img{
width: 300px;
height: 300px;
}
#example{ 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-image: url("lion.png"), url("forest.jpg");
  background-blend-mode: color;
}
</style>
</head>
<body>
<center>
<div id = "div1">
<h2> Original Images </h2>
<img src = "lion.png">
<img src = "forest.jpg">
</div>
<h2> background-blend-mode: color; </h2>
<div id="example"></div>
</center>
</body>
</html>

下一话题CSS 单选按钮

CSS background-blend-mode

语法

正常

multiply（乘法）

示例

screen

示例

color-dodge

示例

difference

示例

darken

示例

lighten

示例

饱和度

示例

luminosity

示例

overlay（叠加）

示例

hard-light

示例

soft-light

示例

exclusion

示例

hue

示例

color-burn

示例

color

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS background-blend-mode

语法

正常

multiply（乘法）

示例

screen

示例

color-dodge

示例

difference

示例

darken

示例

lighten

示例

饱和度

示例

luminosity

示例

overlay（叠加）

示例

hard-light

示例

soft-light

示例

exclusion

示例

hue

示例

color-burn

示例

color

示例

相关帖子

CSS font-family

CSS Peeper

CSS justify-content

Box-shadow CSS

page-break-after 属性

CSS Color Palette

Text Ellipsis CSS

CSS 垂直对齐

CSS cubic-bezier

CSS 边框

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器