html - 我可以排除使用 -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);
}

完整的例子在这个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>

查看此小提琴以查看它的实际效果。