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

小码哥的IT人生

首页 > Web前端 > css3基础

CSS mix-blend-mode 属性 详解

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

CSS mix-blend-mode 属性

定义和用法

mix-blend-mode 属性规定元素的内容应如何与其直接父背景混合。

另请参阅：

CSS 参考手册：CSS background-blend-mode 属性

实例

拥有红色背景的容器，以及与这个红色容器融合的图像（暗）：

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

 

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  background-color: red;
  padding: 15px;
}
.container img {
  mix-blend-mode: darken;
}
</style>
</head>
<body>
<h1>mix-blend-mode 属性</h1>
<p>mix-blend-mode 属性规定元素内容如何与其背景混合：</p>
<div class="container">
  <img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300">
</div>
</body>
</html>

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

可以在页面下方找到更多 TIY 实例。

CSS 语法

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

属性值

值 描述
normal 这是默认值。将混合模式设置为普通。
multiply 将混合模式设置为 multiply。
screen 将混合模式设置为 screen。
overlay 将混合模式设置为 overlay。
darken 将混合模式设置为 darken。
lighten 将混合模式设置为 lighten。
color-dodge 将混合模式设置为 color-dodge。
color-burn 将混合模式设置为 color-burn。
difference 将混合模式设置为 difference。
exclusion 将混合模式设置为 exclusion。
hue 将混合模式设置为 hue。
saturation 将混合模式设置为 saturation。
color 将混合模式设置为 color。
luminosity 将混合模式设置为 luminosity。

技术细节

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

更多实例

示例代码：

演示所有值：

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

 

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  background-color: red;
  height: 5000px;
}
img {
  width: 33.33%;
  height: auto;
  float: left;
}
.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}
</style>
</head>
<body>
<h1>所有 mix-blend-mode 值</h1>
<p>mix-blend-mode 属性规定元素内容如何与其背景混合：</p>
<div class="container">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="normal" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="multiply" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="screen" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="overlay" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="darken" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="lighten" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="color-dodge" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="color-burn" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="difference" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="exclusion" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="hue" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="saturation" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="color" width="300" height="300">
  <img src="/i/photo/tulip.jpg" alt="Tulip" class="luminosity" width="300" height="300">
</div>
</body>
</html>

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

示例代码：

使用 mix-blend-mode 来创建响应式 cutout/knockout 文本（抠图文本）：

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw;
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

 

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw;
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
</style>
</head>
<body>
<h1>响应式文本抠图效果</h1>
<div class="image-container">
  <div class="text">SHANGHAI</div>
</div>
<p>本例创建了一种响应式的抠图文本，文本会剪切背景图像。</p>
<p>请调整 浏览器窗口大小来查看响应式效果。</p>
<p><b>注释：</b>此例在 Internet Explorer 或 Edge 中无效。</p>
</body>
</html>

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

浏览器支持

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

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0

相关阅读

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

苏公网安备 32030202000762号

© 2021-2024