ホームページ > 記事 > ウェブフロントエンド > CSS ブレンドモード
CSS ブレンドモード
- 高洛峰オリジナル
- 2017-02-23 10:07:491578ブラウズ
前の言葉
コンテキスト z-index を積み重ねることは、どちらがユーザーに近いかをカバーする 2 つの要素の問題を解決するだけです。 CSS ブレンド モードは、2 つの要素のカバー部分をどのようにブレンドするかという問題を扱います。 Photoshop を知っている場合は、この現象に精通しているはずです。 CSS3 には、ミックス モードに関連する 2 つのプロパティがあります。mix-blend-mode と background-blend-mode です。この記事では、CSS ミックス モードについて詳しく紹介しますmix-blend-mode和background-blend-mode，本文将详细介绍CSS混合模式
元素混合
元素混合mix-blend-mode应用于两个元素之间的混合
mix-blend-mode
初始值: normal
应用于: 所有元素
继承性: 无
值: normal(正常) | multiply(正片叠底) | screen(滤色) | overlay(叠加) | darken(变暗) | lighten(变亮) | color-dodge(颜色减淡) | color-burn(颜色加深) | hard-light(强光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(饱和度) | color(颜色) | luminosity
(亮度) | initial(初始) | inherit(继承) | unset(复原)
兼容性: IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀
[注意]该元素会创建层叠上下文，z-index属性有效
背景混合
背景混合background-blend-mode应用于一个元素的多背景图或背景图与背景颜色之间的混合
background-blend-mode
初始值: normal
应用于: 所有元素
继承性: 无
值: normal(正常) | multiply(正片叠底) | screen(滤色) | overlay(叠加) | darken(变暗) | lighten(变亮) | color-dodge(颜色减淡) | color-burn(颜色加深) | hard-light(强光) | soft-light(柔光) | difference(差值) | exclusion(排除) | hue(色相) | saturation(饱和度) | color(颜色) | luminosity
(亮度) | initial(初始) | inherit(继承) | unset(复原)
兼容性: IE浏览器、android4.4-不支持，safari和IOS需要添加-webkit-前缀
隔离
隔离isolation的作用是创建一个堆叠上下文stacking context，主要用于与mix-blend-mode属性一起使用时，将混合模式只应用于某一个元素或某一组元素
isolation
初始值: auto
应用于: 所有元素
继承性: 无
值: auto | isolate(创建新的堆叠上下文) | initial | inherit | unset
<style>
body{background-color: gray;}
.test1,.test2{display: inline-block;width: 100px;height: 100px;border:1px solid black;}
.test2{isolation: isolate;}
.in{width: 50px;height: 50px;background-color: red;mix-blend-mode: screen;}
</style>
</head>
<body>
<p class="test1">
<p class="in"></p>
</p>
<p class="test2">
<p class="in"></p>
</p>
如果不使用isolation: isolate创建堆叠上下文，由于.test1和.test2背景颜色透明，则.in会和<body>背景颜色混合，成为粉色。使用isolation: isolate后，.test2从<body>中隔离出来，不与<body>的背景进行混合，从而保留其原先的红色
由于isolation: isolate
。要素ミックス
要素ミックス mix-blend-mode は 2 つの要素間のミックスに適用されます
mix-blend-mode
初期値：normal