CSS mix-blend-mode 属性

cssweb developmentfront end technology更新于 2024/11/20 3:24:17

mix-blend-mode 属性用于设置元素内容与其直接父级背景的混合方式。以下是属性值 -

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

示例

现在来看一个例子 −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
   height: 800px;
   background-color: brown;
}
img {
   width: 33.3%;
   height: auto;
   float: left;
}
.demo1 {
   mix-blend-mode: normal;
}
.demo2 {
   mix-blend-mode: darken;
}
.demo3 {
   mix-blend-mode: lighten;
}
.demo4 {
   mix-blend-mode: hue;
}
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Note:</strong> The mix-blend-mode property is not supported in Internet Explorer or Edge.</p>
</body>
</html>

输出

示例

现在让我们看另一个例子 −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
   height: 800px;
   background-color: brown;
}
img {
   width: 33.3%;
   height: auto;
   float: left;
}
.demo1 {
   mix-blend-mode: color-dodge;
}
.demo2 {
   mix-blend-mode: color-burn;
}
.demo3 {
   mix-blend-mode: exclusion;
}
.demo4 {
   mix-blend-mode: saturation;
}
</style>
</head>
<body>
<h2>Learn Xamarin</h2>
<div class="container">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
<img src="https://www.cainiaomax.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Note:</strong> The mix-blend-mode property is not supported in Internet Explorer or Edge.</p>
</body>
</html>