CSS3学习与总结 · mix-blend-mode属性

CSS3 新增了一个很奇妙的属性 -- mix-blend-mode，这个属性的作用根据名字翻译过来就是混合模式。可以根据这个新特性优化一些图形颜色展示。

CSS3 mix-blend-mode 混合模式

一、定义

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

二、浏览器支持

属性	Chrome	Edge	Firefox	Safari	Opera
mix-blend-mode	41.0	不支持	32.0	8.0	35.0

三、属性值

属性值	含义
normal	正常
multiply	正片叠底
screen	滤色
overlay	叠加
darken	变暗
lighten	变亮
color-dodge	颜色减淡
color-burn	颜色加深
hard-light	强光
soft-light	柔光
difference	差值
exclusion	排除
hue	色相
saturation	饱和度
color	颜色
luminosity	亮度
initial	初始
inherit	继承
unset	复原

四、实例

这里以mix-blend-mode的值multiply为例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS3新属性：mix-blend-mode | 天問</title>
  <style>
      .container {
          padding: 30px 0;
      }
      h1 {
          text-align: center;
      }
      .box {
          text-align: center;
          padding: 30px;
          background: #E998A3;
          margin-top: 20px;
      }
      .img {
          height: 80px;
      }
      .mixin .img {
          mix-blend-mode: multiply;
      }
      .desc {
          padding: 30px 0;
      }
  </style>
</head>
<body>

<div class="container">
  <h1>CSS3新属性：mix-blend-mode</h1>

  <div class="box">
    <img src="https://tiven.cn/static/img/hourglass-time-hours-sand-preview-tOqBton_9Qy7cZsnLctFJ.jpg" alt="tiven.jpg" class="img">
    <div class="desc">原图展示</div>
  </div>

  <div class="box mixin">
    <img src="https://tiven.cn/static/img/hourglass-time-hours-sand-preview-tOqBton_9Qy7cZsnLctFJ.jpg" alt="tiven.jpg" class="img">
    <div class="desc">使用mix-blend-mode属性后展示</div>
  </div>
</div>

</body>
</html>

展示：

CSS3混合模式

使用了混合模式，图片和背景色融合在一起了，展示效果很神奇有木有。

demo演示地址：https://tiven.cn/demo/mix-blend-mode.html

欢迎访问：天问博客