【CSS】mix-blend-modeが効かない､デザイン通りにならないときの対処法
CSSでスクリーンや乗算などのブレンドモード(描画モード)を指定できるプロパティ「mix-blend-mode」がデザイン通りにならないときの対処法をご紹介します｡
例として､この記事では
この背景に
この車を重ねて
このフレアをスクリーンで重ねます｡
Photoshopで「フレア」を「スクリーン」にするとこのようになります｡
デザイン通りにならない例
実際に「mix-blend-mode」を使って組んでみます｡
まずはこちらをご覧ください｡
車には正しくmix-blend-modeが効いていますが､背景画像には効いていません｡
HTML構造はざっくりこんな感じ｡
<div class="bg">
<!-- 背景 -->
<img src="bg.jpg">
<div class="cars">
<!-- 車 -->
<img src="img/cars.png">
<div class="flare">
<!-- フレア -->
<img src="img/flare.jpg">
</div>
</div>
</div>.carsというdivタグの中に､車とフレアを入れています｡
そしてCSSで.flareに「mix-blend-mode」をかけています｡
.flare {
mix-blend-mode: screen;
}CSS全体を見たい方はこちら(開く)
.bg {
position: relative;
overflow: hidden;
}
.cars {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
z-index: 1;
}
.flare {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
mix-blend-mode: screen;
z-index: 2;
}デザイン通りになる例
次にこちらをご覧ください｡
デザイン通りになってると思います！
HTML構造はざっくりこんな感じ｡
<div class="bg">
<!-- 背景 -->
<img src="bg.jpg">
<div class="cars">
<!-- 車 -->
<img src="img/cars.png">
</div>
<div class="flare">
<!-- フレア -->
<img src="img/flare.jpg">
</div>
</div>先程と違い､背景と車とフレアを同じ階層に配置しています｡(CSSは変えていません)
なぜか？
「mix-blend-mode」が効かないときはスタックコンテキストが原因かも知れません｡
スタックコンテキストとは､positionにrelativeやabsoluteを使い､かつz-indexを指定したときなど､特定の条件を満たしたときに生成される階層構造のことです｡
今回の場合「背景・車・フレア」が､同じスタックコンテキストに属する必要があります｡
「デザイン通りにならない例」では.carsというdivタグの中に､車とフレアを入れていましたが
.carsにはabsoluteとz-indexが指定されているので､背景とは違うスタックコンテキストに属していたのです｡
という訳で「mix-blend-mode」が効かない！という方は､HTML構造を変えてみたりして､要素同士が同じスタックコンテキストに属するように調整してみてください！
