问题标签 [css-mask]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - CSS：使用“背景剪辑：文本”和线性渐变的浏览器兼容性问题
我试图在滚动上创建褪色文本效果，其中元素顶部和底部的文本是透明的，但中心的文本仍然完全不透明。视频背景上还有无限滚动的文本。因为效果不好解释，这里是目前只在 Chrome 上运行的效果演示：
工作演示：http ://dboxcg.dev.dbox.com/portfolio
它在 chrome (v81.0.4) 上运行，但在 firefox、safari 和所有移动浏览器上运行。
以下是上述演示的代码：
我能够通过以下问题的答案在 Chrome 上完成上述工作： Fade out text on image
mask-image看起来像正确的 CSS 属性，但在我的示例中遇到了无限滚动文本的问题。
是否有可能为这种效果获得一些跨浏览器兼容性？
html - 模糊图像的单面
如何模糊图像的一侧以创建从图像到背景的良好过渡？
我可以用这个小技巧做到这一点：
但-webkit-mask-image不是一个可靠的选择。
还有其他方法可以实现吗？
css - css中的图像掩码不适用于本地文件
我正在尝试使用 CSS 和 WebKit 属性 (-webkit-mask-image) 屏蔽图像。但是由于某种原因，当我从 PC 上的本地文件中使用它时，甚至当我将它上传到我的网站并使用链接时，它都不起作用。如果我直接从教程网站使用蒙版图像，我遵循蒙版效果很好。在下面的代码中，您可以看到我已经注释掉了一个 webkit-mask-image，如果您按原样运行代码，您将什么也看不到，而如果您取消注释并注释掉第二个 webkit-mask-image，它将开始工作。如果我使用 PC 的文件路径而不是教程 URL，也会发生同样的事情。这个你能帮我吗。看起来真的很奇怪。
css - 如何使内联 SVG 蒙版响应？
所以在过去的几天里，我第一次尝试使用 SVG。
我一直在尝试制作一个响应式面具，但没有成功。
我知道对此有很多问题和答案，但在我的情况下似乎没有一个。
有人可以给我一个提示我错过了什么吗？
css - 如何在图像中使用 CSS 蒙版？
我正在尝试在图像上放置渐变蒙版，但它不起作用
面膜的正确使用方法是什么：
html - css 属性掩码不适用于 svg
Css 属性clip-path工作正常，但在此示例mask中无法正常工作。-webkit-mask
请帮我解决这个问题，因为我的项目完全依赖于使用 svg 文件屏蔽图像。
在clip-path中，我无法在响应式视图中调整图像大小，所以我只有一种方法来解决这个问题。
所以请检查示例代码，可能是我犯了任何错误。
html - 如何使用 CSS（在文本上）应用适当的渐变 alpha 蒙版？
我正在使用 html+css 和 jquery 自己创建一个网站。最近开始使用 Autoprefixe 附带的 SASS，这样我就可以更轻松地完成一些格式化并能够使用 sass 库。
我正在尝试将渐变 alpha 蒙版应用于一些我已经以“选框样式”循环的菜单项。
我首先在背景图像标签中为蒙版创建图像。这个想法是菜单上方和下方有两个框，由于 alpha 淡入淡出的工作原理，应用蒙版时黑色部分将最清晰，而框的透明部分将是文本消失的地方。经过一些调整后，我得到它看起来像这样：
但是当我将 background-image 属性切换为 mask-image 时，它并没有真正掩盖 marquee-content（菜单项）。事实上，黑匣子似乎只是消失了，没有任何掩蔽发生。
在这一点上，我不确定出了什么问题，即使我使用了 autoprefixer，Firefox 也是如此，这意味着我在逻辑方面没有做正确的事情。从我读到的内容中，alpha 蒙版也应该适用于元素的子元素，所以我的蒙版应该屏蔽掉选框内容。
这是我的HTML结构供参考
所以是的，我一直在为此苦苦挣扎，非常欢迎任何帮助或建议！有没有其他方法可以达到这种效果？一个更好的？我只是坏吗？
*我还特意用 rgb 和 rgba 制作了面具，看看是否有问题。不是。:<
css - 如何仅将蒙版图像应用于元素的背景而不是其子元素？
我正在尝试在元素的背景上应用蒙版图像，但我不想掩盖它的孩子。我试图更改 z-index 没有任何成功。
正如您在我的 Codepen 上看到的那样：https ://codepen.io/marc-tison/pen/jOWGaYe ，红色框被遮盖了。
有没有办法防止这种情况发生？
html - CSS：如何从顶部和底部淡化文本？
我需要从顶部和底部淡化段落。但我只能从任何一方消失。
HTML：
CSS：
当前结果：
问题：
如果我将这两个类名都添加到段落中，则淡入淡出将不起作用。如果我使用其中任何一个，那么淡入淡出对于顶部和底部都非常有效。是否可以将这两个 CSS 属性合二为一，以便顶部和底部淡入淡出都起作用？
注意：我不是在谈论任何动画。
javascript - 如何改善蒙版图像页面转换？
我正在尝试实现与本网站http://56k.studiovoila.com/相同的页面过渡效果
所以经过几次搜索，我找到了这个教程https://tympanus.net/Tutorials/CSSMaskTransition/，我把他们在演示 1 中使用的 PNG 用正确的代码添加到我的项目中。
您可以在此处查看我的代码示例。（效果模糊但你可以猜到效果）
问题：
1.当用户使用 firefox 但仅从 Mac 计算机 (Catalina 10.15.5) 看到转换时，这似乎是错误的。你可以在我在https://abiesco.ch创建的网站上看到这个错误
2.因为是PNG，所以在动画的过程中不能轻易改变形状，不是很灵活。我没有源文件（photoshop 或 after effect）。
我的问题 ：
是否可以使用 SVG 变形来获得相同的效果？我知道我们可以将anime.js 与鼓膜教程和DesignCourse youtubeVideo 一起使用。但我真的很想保留水——填充和离开屏幕的有机形状。
我已经尝试过bodymovin 插件的后效，它允许将后效动画导出到lottie.js可以动画的 json 文件。但是插件不支持湍流置换过滤器（用于水效果）。