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;
}
 

使用方法：

        <div class="container">
			<div class="mode red"></div>
			<div class="mode blue"></div>
			<div class="mode white"></div>
		</div>

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 路徑