问题标签 [css-mask]

我正在应用一个 SVG 图像蒙版来创建一个框架和图像，如下所示：

预期结果：遮罩应该不成比例地拉伸以适应元素的大小。据我了解，掩码大小应该与背景大小完全一样，并且这在背景大小中可以按预期工作（将背景宽度拉伸/扭曲到包含元素宽度的 100%，将高度拉伸/扭曲到包含元素的 100%元素的高度）。

实际结果：遮罩被包含到图像高度的 100%，但保持比例，因此不会显示图像的整个宽度。

我在这里想念什么？

这是一个工作示例：

https://jsfiddle.net/StudioAl/jokbL97u/29/

ETA：链接的 SVG 代码：

我正在尝试使用 SVG 蒙版和 CSSclip-path属性在网站上制作一些“参差不齐”的部分分隔线。

我需要能够将这些“参差不齐”的底部边缘应用于任何高度的部分/行，因此我需要能够根据部分的高度定位并希望根据需要缩放它们，并希望视口宽度以及。

我可以使用该clip-path: url(#svg-id);方法添加 SVG 蒙版 — 到目前为止一切顺利！

我无法弄清楚如何使用 CSS 定位 SVG（例如向上或向下移动页面），但我确实发现我可以transform="translate(X,Y);"在 HTML 中向 svg 路径本身添加一个属性作为定位 SVG 的解决方法.

现在的问题是，如果我使用这种方法将 SVG 移到页面下方，它也会开始屏蔽被屏蔽元素的顶部边缘——表现得像一个“窗口”并屏蔽掉它之外的所有东西，而不仅仅是屏蔽 SVG 的屏蔽部分。

这是一个代码笔，显示我到目前为止的位置：https ://codepen.io/moonweasel/pen/PomJgej

我将不胜感激任何人都可以给我关于如何使用 SVG 仅掩盖它所应用的元素的底部边缘，并让其余元素显示，以及如果可能的话如何使用 CSS 定位 SVG 的任何指针而不必向 HTML SVG 路径添加属性。

到目前为止，我正在对图标进行 CSS 闪亮效果我已经使用 webkit 掩码创建了效果下面是我的片段

但现在我希望这个动画每 5 秒重复一次，就像每个动画循环之间有 5 秒的延迟。我不确定如何使用 javascript 来实现这种效果。有任何想法吗？

我的目标是能够使用 PNG alpha 蒙版沿网站上部分/行/容器的底部创建“锯齿状边缘”。

因为行可以是任意高度，所以我需要能够仅沿元素的一个边缘应用薄蒙版图像，并且仍然显示蒙版“开始”点上方的所有内容。

我可以通过分层两个蒙版在 Safari 中实现这一点：一个linear-gradient（黑色>黑色）覆盖容器的任何高度，加上一个 66px 高的 alpha PNG“条”用于容器的底部边缘，然后设置-webkit-mask-composite: destination-atop- 这有效地反转了蒙版，允许 PNG 上方的所有内容都显示出来，并且只掩盖底部“参差不齐”的边缘。

这是在 Safari 桌面浏览器中运行的代码：

您可以在此（测试/开发）站点的白色导航栏上的 Safari 桌面浏览器中看到此功能：https ://wesleyd14.sg-host.com

不幸的是，它似乎-webkit-mask-composite: destination-atop在 Chrome 中不受支持，并且mask-composite在 Firefox 中没有等效值。

有谁知道另一种可以完成同样事情的方法，即仅沿容器的一个边缘应用蒙版，同时仍允许蒙版之外的所有内容保持未蒙版？

我正在尝试构建反应组件来动态设计产品，用户可以在其中选择 T 恤、马克杯、夹克等产品，并选择要在该产品基础上打印的图像。起初我试图在产品基础上实现图像蒙版。我对选择的图像使用了反应可拖动和可调整大小的组件。这是代码： https ://stackblitz.com/edit/react-draggable-and-resizable-pictures-3uufjl?file=index.js 当用户拖动或调整图像大小时，如果选择的图像超出 T 恤的边界，我会尝试隐藏它。我研究了 CSS 蒙版，其中背景图像和蒙版图像应用于相同的元素，但我有背景图像（即 tshirt ）和蒙版图像（即 monalisa 图像），它们位于不同的 html 元素中。我有点困惑如何使用选择图片来实现 T 恤的 css 蒙版图像。

我想要做的是，在我的背景图像上蒙版/剪辑渐变。下图是预期的结果

但实际结果如下图。渐变只覆盖了我的整个背景图像。

这是我的jsfiddle，下面是我的 css

感谢任何建议和帮助，甚至可能吗？到目前为止我发现的仅适用于 img 标签

我正在尝试使用 CSS 将三种纯色（图 B）的外部渐变边框（图 B）添加到图像（图 A）中，但到目前为止我尝试过的方法并没有太多运气。图像将具有border-radius: 50% 以使它们成为圆形，并且外边框需要随图像缩放。我希望能够仅使用 CSS 类将其快速应用于任何图像。

我尝试过 SVG 蒙版、边框图像和常规叠加，但似乎都没有完成手头的任务。 这支笔是我得到的最接近的，但是我需要图像和边框之间的空白。

关于我应该如何处理这个问题的任何想法？

I recently came across this dribbble/landing page concept with hollow/filled text.

First off I'm not entirely sure if this concept could be recreated in CSS. A bit of Google did lead me to CSS text masks, but I wasn't able to find any post that can really recreate this effect.

How would I be able to reconstruct the hollow/filled text, depending if the background behind the text has an image or not?

我正在尝试显示带有两个 svg 蒙版的图像。我尝试了几种不同的方法，但似乎无法做到正确。这是一个粗略的图像来说明我想要什么：

图像是黑色方块，面具是红色。我尝试将它们添加为伪元素，但它会造成如此混乱。理想情况下，当用户将鼠标悬停在上方时，他们会一起移动以完成圆圈，但我希望图像保持一致（不是同一 img 的两个不同部分）。我怎样才能做到这一点？

https://oogvoordialoog.myio.nl/你看到这个链接了吗？我写了一些 css 来为带有 css 蒙版和一些元素（眼睛）的图像制作一种笔触。笔画在 Safari 中不起作用……它在所有其他浏览器中都起作用，但在 Safari 中起作用。

我在团队页面上使用相同的 css，它在那里工作。唯一的区别是它只是一个图像而不是眼睛。

我使用 Wordpress 和 Elementor Pro。在热点小部件上它不起作用，但在图像小部件上它工作。您可以在检查器中看到我的所有代码。

解决办法是什么？

这是我的边框css代码。也许还有其他方法可以在带有 css 蒙版的对象上制作边框？