html - Can I exclude elements from being masked with -webkit-mask-image?

Question

<div id="wrapper">
    <div id="excluded"></div>
    Some very long text, that is masked on the left
</div>

Looks like

The mask is created with

#wrapper {
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), black 100px);
}

完全な例はこのfiddleにあります。

div #excluded をラッパー内のテキストのようにマスクしないようにしたいのですが、ラッパーの外に移動しなくても可能ですか?

Answer 1

一見すると、ラッパー内のすべてがマスクされます。あなたの最善の策は、

<div id="wrapper">
    <div id="excluded"></div>
    <p>Some very long text, that is masked on the left.</p>
</div>

このフィドルをチェックアウトして、実際の動作を確認してください。