1

スポットライトのある繰り返し背景に取り組んでおり、これを実現するためにブレンド モードを使用することにしました。

ただし、Chrome ではブレンド モードが適用されていないように見えます。

ここに複製: http://jsfiddle.net/pptn4f5v/7/

body {
    background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), url("https://dl.dropboxusercontent.com/u/10686242/background-blend%20-%20Copy.png") #030303;
    background-repeat: repeat, no-repeat;
    background-blend-mode: multiply, normal;
    background-size: auto, contain;
}

これはChromeの制限ですか？これは Firefox で完璧に動作します。

4

1 に答える 1

3

おそらくChromeのバグです

ただし、この効果はより簡単に取得でき、両方のブラウザーで問題なく動作します。

背景は 2 つだけ使用し、グラデーションでスポットを作成します

.test {
    background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), 
          radial-gradient(circle at 250px 100px, transparent 50px, #606060 150px);
    background-blend-mode: darken;
  height: 400px;
}
<div class="test"></div>

于 2015-10-17T07:32:57.150 に答える