问题标签 [css-mask]

我是编码html和css的初学者，所以关于svg的问题。当我使用 svg 作为背景图像并且想要更改颜色时也给出阴影，它不能同时使用这两个属性。希望可以有人帮帮我：

我有一个元素，我只想在元素的末尾屏蔽它。我设法编写了一些代码来屏蔽元素的结尾，但元素的其余部分现在也被屏蔽了。我想更改遮罩，以便遮罩左侧的所有元素仍然可见。

我正在尝试在我的 Vue 组件中使用 CSS 掩码。我需要完成toSvg下面功能的实现。这会将来自的 Vue VNode 渲染为this.$slots.defaultSVG 字符串。

使用示例：

显示为：

我已将 svg 作为掩码图像应用于某些 div。这样做之后，他们的边界就消失了。

知道为什么会这样吗？任何解决方案都应该完全基于 css。

下面的动画是在 Adob​​e AE 中通过简单地移动带有红色色调的图像蒙版创建的。

我试图弄清楚如何在 CSS/JS 中实现类似的东西（甚至可能吗？）。色调本身可以通过混合模式处理，但在不移动蒙版图像的情况下移动蒙版/调整图层似乎具有挑战性。

我有一个透明的径向渐变，我将其用作蒙版图像，以便在 div 中“切出一个半圆形的孔”。

我正在使用透明的径向渐变，因为我希望“洞”成为一个实际的“洞”（意思是，我希望能够看到 div“后面”的内容）。

演示：

如何为半圆形添加边框（让我们“2px纯黑色”）？

我可以mask-image在我想要的 div 的任何地方应用 a，但我可以在同一个 div 上应用多个mask-image吗？

单例mask-image：

如果我想同时在顶部和底部应用相同的蒙版，代码会是什么样子？

编辑：我知道 Chrome 支持mask-composite，但是（在撰写本文时）仅适用于 Chrome。

我有一个mask适用于它的 div。我注意到我不能box-shadow在同一个 div 上应用 a，所以我必须将阴影移动到“包装器”div。

问题是如果将阴影放在阴影 div 上，mask则不会应用到阴影。

如何将 amask应用于 div 及其阴影？

嗨，我想在我的 div 上产生这样的效果，但只在顶部：

我知道有 css 掩码属性，但对我来说真的很复杂。

我的解决方案是我创建了单个圆形 svg 并重复多次，但我也需要左/右空间。

嗨，我希望在我的 div 上产生这样的效果，但只在底部：

我现在做的是这样的：

面具中的哪个属性允许我为圆圈赋予颜色？整个面具属性让我感到困惑。