问题标签 [css-mask]

我正在研究一种全球褪色行为。位于可滚动区域中的一般内容（无论是文本还是其他内容）。由于各个区域的背景并不总是相同，我一直在寻找一种解决方案，它可以让内容在滚动时透明地运行。因此，您不必为每条内容都创建新的淡入淡出。

然后我想到了用一个在上下设置渐变的蒙版来做到这一点。

不幸的是，我现在遇到的问题是掩码也在浏览器给出的滚动条上方。

这里有一个小例子：

https://jsfiddle.net/2psemtzd/1/

是否可以从掩码中排除滚动条？

我正在制作一个网站，我希望它是一个白页，您可以标记它以使另一个图像出现在下面。因此，当您单击时，您会打孔。像这个例子：

因此，当我单击时，我设法在背景中有一个随机图像，这对我想要的东西来说很好，并且能够.append()打孔。 但我不知道如何做面具的事情，我一直在网上挖掘一些东西和帮助，并设法让它在某些情况下工作，但不是那种......

应该是这样的（我猜）：

• 背景中的图像
• 前面的白色形状
• 星形在白色形状上打洞

现在，我唯一能做的就是除了一个更大的打孔器（这是我的原始图像）之外的图片，但是当我点击它时不会打孔，它只是添加了图章。

这是代码：

我想包装这个

里面

达到类似的结果

也就是说，T 恤应该在云中裁剪，跟随它的路径。

我尝试使用 CSS 边框蒙版，但没有成功：

我该怎么做？我也读过这个clip-path方法，但我不知道如何绘制这个 SVG 路径......

我可以在 SVG 蒙版制作的切口内有阴影吗？

这是我正在使用的代码

index.html

styles.css

这是我得到的结果

但这是我想要的结果（我已经在 Illustrator 中制作了）：

这是 SVG：https ://drive.google.com/file/d/1O7nGJHeYkgw9Al9BojSVI7f8zKzv4fbu/view?usp=sharing

我有一个项目，我尝试用渐变边框绘制一个圆圈。我已经做到了，所以它可以在 Chrome 中运行。但是样式在 safari 中不起作用。我不知道为什么它不起作用。我已经mask:为 safari 添加了一个版本。

我有一个 SVG 并使用带有背景颜色的蒙版来显示 SVG，是否有任何属性可以用来反转蒙版？例如。通常 svg 掩码不会显示任何不在 svg 后面的东西，我怎么能以另一种方式发生这种情况？

我原以为 mask-composite 将是此处使用的属性，但是浏览器（Chrome）无法识别它

当我在 a 上使用遮罩时div，我无法backface-visibility为其子级隐藏。这是一个示例，其中文本Hellohidden在其父级旋转时尚未变为。我该如何解决这个问题？

我有一个项目，我需要同时使用剪​​辑路径和蒙版，以便在 div 上获得某种渐变着色。我使用剪辑路径和蒙版将颜色包含在 div 的边界内。

这在 Chrome 和 Firefox 中都可以正常工作。但在 Safari 中，其他元素仍然在被遮罩的元素后面，无法进行交互。正如您在下面的代码片段中看到的，我添加了 2 个示例。一个使用剪辑路径，另一个使用蒙版。在 Safari 中，无法与绿色 div 进行交互。

我已将 svg 蒙版应用于使用 Gutenberg 封面块创建的 mp4 视频。问题是 wp-block-cover__inner-container 文本也被 svg 掩盖，但需要出现在其上方。

我尝试使用以下答案来解决我的问题，但我不是专业人士并且无法这样做：如何仅在元素的背景上而不在其子元素上应用蒙版图像？

网址：https ://net0kitchen.com/393-2

CSS：

非常感谢任何帮助。

我目前想知道这是否可以在 CSS 中改变我的文本的不透明度......但是从中心，就像我可以给出一个点（比如我宽度的 50%）并将不透明度设为 0 在这个精确的点，并在我们远离它时增加它。

这是我想要达到的结果： 我期待什么

这里的问题是我不能修改背景（比如在这里做一个线性背景的东西），因为背景不是单一颜色： 我的背景

所以……我来了。我已经能够达到这个状态： 我的状态

通过使用这个：

我想我越来越接近解决方案，但我真的很想知道是否有更简单/更常见的方法来做到这一点。

感谢您的阅读，祝您有美好的一天！