我可以排除使用-webkit-mask-image屏蔽的元素嗎？

Question

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

看起來像

蒙版使用

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

完整的例子在這個小提琴中 。

我希望div #excluded不像包裝器內的文本那樣被掩蓋，是否可以不將其移到包裝器外？

Answer 1

從外觀上看，它掩蓋了包裝器中的所有東西。 最好的選擇是按照以下方式做點事情

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

查看此小提琴以查看其操作。