使用没有元素的CSS掩码就像它有溢出：隐藏;

Question

我正在尝试将CS​​S蒙版应用于一个元素，该元素也包含位于外部父元素的子元素。问题是，当我添加掩码时，子元素就会消失，就像我将父元素设置为overflow：hidden;

有没有办法避免这种情况？我意识到也许这可能是有时候想要的行为（总是？）但对我来说它打破了布局。 （编辑：很可能是设置掩码的定义。）

我已经设置了一个JS小提琴我想要做的事情。注释-webkit-mask以查看外部定位元素。

http://jsfiddle.net/jknn9/

@Nate B得到了它：http://jsfiddle.net/jknn9/2/

Answer 1

不幸的是，你所看到的就是面具的重点。正如Webkit's blog所述：

  

因此，面具将覆盖孩子及其所有后代，   并且至少会淘汰边界框外的所有东西   对象。

作为替代方案，也许您使用另一个伪元素（:after）并创建一个红色框，它将作为标签末尾的“上限”并将掩码应用于该元素而不是父元素元件。