问题标签 [css-mask]

我有一个使用 CSS 的带有图像的 div， -webkit-mask-image但我无法为这个 -webkit-mask-image 设置宽度和高度，如 css 背景图像......

我有一个带有图像蒙版的滑块，在 Firefox 和 Chrome 中运行良好（附加）

它的 CSS 非常简单：

但是当我在 Edge 中打开页面时，我根本看不到该元素。我尝试将掩码切换为 PNG 文件，但没有成功。我认为可能是滑块错误，但即使我将 div 的内容切换为空白的黑色元素（也适用于 Firefox 和 chrome），我仍然没有在 Edge 中得到任何结果。

如果我划掉“mask-image”属性，滑块会出现在屏幕上并且工作正常。

这是演示： http ://box5602.temp.domains/~ednahous/

我有另一个网站，在视频顶部有一个图像遮罩，它在 Edge 中运行良好......所以我真的不知道是什么导致了这个问题。

我想在 CSS 中使用遮罩来遮盖元素。但它在我的整个元素中重复。我只想要一个特定位置的面具。这是我现在拥有的：

但我想要这样的东西：

作为记录，我知道mask-repeatCSS 中有一个属性。但它只适用于repeat-x和repeat-y值。那么，如何才能在我的元素中只有一个掩码？

此代码在 Firefox 中无法更准确地使用-web-web-mask-image和mask-image值。我在网上没有找到解决这个问题的方法，所以在这里问。在 Firefox 控制台中，您只能看到：

我正在尝试使用 CSS3 矩形渐变，就像旧的一样：

不幸的是mask-image，属性（我用来实现椭圆属性）没有矩形渐变选项。

（前 CSS3 片段）

（我能够重新创建的 CSS3 只是前 3 张图片）

我想为 CSS 蒙版图像的“蒙版位置”属性设置动画。mask-image 本身是一个简单的渐变，我的预期行为是通过更改 mask 位置的值，我可以使背景对象从左到右淡入。但是，是否可以为该属性设置动画？如果没有，是否有解决方法？

的HTML：

谢谢！

这是我的演示：https ://codepen.io/joondoe/pen/MWwmGwG?editors=0100

在我的示例中，我使用的是 CSS，但我也对使用 SVG 的解决方案持开放态度。

我已经设法创建了一个带有填充内容的边框图像。现在我想知道是否可以创建 100% 平滑的边框图像？我的意思是，以编程方式自动复制原始边框图像或最接近的边框图像。

在我的演示中，您可以看到它非常好，但相对于原始边框图像仍然存在一些锯齿和滞后。这是原始边框图像：

这是我的代码：

有没有办法仅使用 CSS 或 SVG 中的编程功能 - 百分比、填充属性等来重现原始边框的图像？

编辑： 感谢 Termani Afif 的解决方案。 我很惊讶在 Termani Afif 的 anwser 中的图像上有一个像素的间隙，所以我假设我的边界图像和蒙版可能不是这样说的。所以我用其他图像重新组合，效果很好，这里是演示：codepen.io/joondoe/pen/GRJmBQK?editors=0100

我有一个径向渐变，用作mask-image将图像“淡入”到图像background-color 后面。

如何在所有四个边上使用均匀的矩形渐变来获得相同的效果？

我知道您可以组合渐变，而我最近的尝试似乎没有任何效果：

我想使用 png 文件在 css 中创建一个蒙版，但以不同的方式。基本上我不希望掩码显示下面的内容，但我希望它剪切下面的内容并显示其他所有内容。所以就像负面面具。重要的事实是我想掩盖背景图像。这是我想要做的::

我这里有 3 层。第一个是视频 (html)，然后是作为重复背景 (CSS 背景) 的虚线背景，然后是蒙版 - 需要是 png 图像，因为这将是徽标。我希望蒙版移除其下方的背景并显示视频。

jsfiddle

我有一张用 CSS 遮罩的图像。我想要这个蒙版图像上方的文字。似乎 z-index 被忽略了。

我用我的代码做了一个小例子来说明问题。要查看 z 顺序取决于遮罩，您可以悬停橙色元素以取消设置遮罩。

最好的问候和非常感谢提前

球座