参考手册
CSS 属性大全
min-width
object-fit
返回 CSS 属性大全

CSS mix-blend-mode 属性

CSS mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. .container {
  7.   background-color: red;
  8.   padding: 15px;
  9. }
  11. .container img {
  12.   mix-blend-mode: darken;
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <h2>mix-blend-mode 属性</h2>
  19. <p>mix-blend-mode 属性规定元素内容如何与其背景混合：</p>
  21. <div class="container">
  22.   <img src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  23. </div>
  25. </body>
  26. </html>
运行一下

定义和用法

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

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

浏览器支持

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

属性
mix-blend-mode41.079.032.08.035.0

CSS 语法

  1. 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。

更多实例

实例1

演示所有值：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. .container {
  7.   background-color: red;
  8.   height: 5000px;
  9. }
  11. img {
  12.   width: 33.33%;
  13.   height: auto;
  14.   float: left;
  15. }
  17. .normal {mix-blend-mode: normal;}
  18. .multiply {mix-blend-mode: multiply;}
  19. .screen {mix-blend-mode: screen;}
  20. .overlay {mix-blend-mode: overlay;}
  21. .darken {mix-blend-mode: darken;}
  22. .lighten {mix-blend-mode: lighten;}
  23. .color-dodge {mix-blend-mode: color-dodge;}
  24. .color-burn {mix-blend-mode: color-burn;}
  25. .difference {mix-blend-mode: difference;}
  26. .exclusion {mix-blend-mode: exclusion;}
  27. .hue {mix-blend-mode: hue;}
  28. .saturation {mix-blend-mode: saturation;}
  29. .color {mix-blend-mode: color;}
  30. .luminosity {mix-blend-mode: luminosity;}
  31. </style>
  32. </head>
  33. <body>
  35. <h2>所有 mix-blend-mode 值</h2>
  36. <p>mix-blend-mode 属性规定元素内容如何与其背景混合：</p>
  38. <div class="container">
  39.   <img src="/images/pineapple.jpg" alt="Pineapple" class="normal" width="300" height="300">
  40.   <img src="/images/pineapple.jpg" alt="Pineapple" class="multiply" width="300" height="300">
  41.   <img src="/images/pineapple.jpg" alt="Pineapple" class="screen" width="300" height="300">
  42.   <img src="/images/pineapple.jpg" alt="Pineapple" class="overlay" width="300" height="300">
  43.   <img src="/images/pineapple.jpg" alt="Pineapple" class="darken" width="300" height="300">
  44.   <img src="/images/pineapple.jpg" alt="Pineapple" class="lighten" width="300" height="300">
  45.   <img src="/images/pineapple.jpg" alt="Pineapple" class="color-dodge" width="300" height="300">
  46.   <img src="/images/pineapple.jpg" alt="Pineapple" class="color-burn" width="300" height="300">
  47.   <img src="/images/pineapple.jpg" alt="Pineapple" class="difference" width="300" height="300">
  48.   <img src="/images/pineapple.jpg" alt="Pineapple" class="exclusion" width="300" height="300">
  49.   <img src="/images/pineapple.jpg" alt="Pineapple" class="hue" width="300" height="300">
  50.   <img src="/images/pineapple.jpg" alt="Pineapple" class="saturation" width="300" height="300">
  51.   <img src="/images/pineapple.jpg" alt="Pineapple" class="color" width="300" height="300">
  52.   <img src="/images/pineapple.jpg" alt="Pineapple" class="luminosity" width="300" height="300">
  53. </div>
  55. </body>
  56. </html>
运行一下
实例2

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. body {font-family: Arial, Helvetica, sans-serif;}
  8. .image-container {
  9.   background-image: url("/images/paris.jpg");
  10.   background-size: cover;
  11.   position: relative;
  12.   height: 300px;
  13. }
  15. .text {
  16.   background-color: white;
  17.   color: black;
  18.   font-size: 10vw;
  19.   font-weight: bold;
  20.   margin: 0 auto;
  21.   padding: 10px;
  22.   width: 50%;
  23.   text-align: center;
  24.   position: absolute;
  25.   top: 50%;
  26.   left: 50%;
  27.   transform: translate(-50%, -50%);
  28.   mix-blend-mode: screen;
  29. }
  30. </style>
  31. </head>
  32. <body>
  34. <h2>响应式文本抠图效果</h2>
  36. <div class="image-container">
  37.   <div class="text">巴黎</div>
  38. </div>
  40. <p>本例创建了一种响应式的抠图文本，文本会剪切背景图像。</p>
  41. <p>请调整 浏览器窗口大小来查看响应式效果。</p>
  42. <p><b>注释：</b>此例在 Internet Explorer 或 Edge 中无效。</p>
  44. </body>
  45. </html>
运行一下

相关页面

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

min-width
object-fit

分类导航