我可以使用-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>

结帐this fiddle以查看其实际效果。