7

要素のドロップ シャドウだけを、それが重なっている要素の色とブレンドすることは可能ですか?

例: 1 つの要素が他の要素と重なっています。上部の要素には、ライト グレーのドロップ シャドウがあります。下の要素は黒です。どちらの要素自体にもブレンドを適用したくありませんが、重なっている要素のドロップシャドウを下の要素の色とブレンドして、重なっている要素に影が当たる場所に暗い灰色を作成します。

ドロップ シャドウを含む要素全体に効果を適用したい場合は、mix-blend-mode:multiply を使用して実現できます。効果的に mix-blend-mode をドロップ シャドウのみで使用したいのですが、これは可能ですか?

4

1 に答える 1

9

これはできませんが、同じサイズで乗算ブレンド モードを使用する疑似要素にドロップ シャドウを適用することはできます。

.above {
    position: absolute;
    background: green;
    width: 100px;
    height: 100px;
}

.above::before {
    box-shadow: 3pt 3pt 0 0 dodgerblue;
    mix-blend-mode: multiply;
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.below {
    position: absolute;
    top: 50px;
    left: 50px;

    width: 100px;
    height: 100px;

    background: red;
}
<div class="below">
</div>
<div class="above">
</div>

これらの色は説明のために使用しましたが、自分の色に置き換えることができます。

于 2018-10-16T15:18:10.927 に答える