mix-blend-mode
阿新 • • 發佈:2018-12-04
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: