mix-blend-mode

CSS3 新增了一个很有意思的属性 -- mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。

参数展示：

{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度
   
  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

使用方法：

        

			

			

			

		

style

body {
			background-color: #fff;
		}
		
		.container {
			position: relative;
			width: 150px;
			height: 150px;
			margin: 100px auto;
		}
		
		.container>div {
			position: absolute;
			top: 0;
			left: 0;
			width: 150px;
			height: 150px;
			border-radius: 50%;
			mix-blend-mode: normal;
		}
		
		.title {
			color: #333;
			font-size: 24px;
			line-height: 32px;
			text-align: center;
		}
		
		.red {
			background-color: rgba(255, 0, 0, .8);
			transform: translateX(25%);
		}
		
		.blue {
			background-color: rgba(0, 255, 0, .8);
			transform: translateX(-25%);
		}
		
		.white {
			background-color: rgba(0, 0, 255, .8);
			transform: translateY(-25%);
		}

自己改参数试试。

其余demo：

         demo 路径