问题标签 [css-mask]

我想这个问题已经被问过很多次了。其中一些可以在 Chrome 或 Firefox 上运行。

我尝试了解决方案：

将此添加到 div 类，并将视频标签的高度更改为

视频源来自webrtc，使用getusermedia，使用rc类可以成功地将视频流塑造成圆形并呈现在网页上。

问题是每次，视频源都不会在圆形的中心，它会停留在左边一点。例如，当我的脸在镜头前时，我的脸只有一部分在圆形的右侧。它不在圆的中心。任何人都知道如何解决这个问题？

谢谢。

我想打印（在浏览器中）一个带有 2 张图片的 div。一个 div (#pic1) 有一个狮子的背景图像，另一个 div (#pic2) 是同一张图片，但样式为“-webkit-mask-box-image”和背景颜色（一种颜色叠加在 Photoshop 中）。

HTML 代码如下所示：

在浏览器中，一切看起来都很好。就像我想要的一样。见下图。

但是一旦我想打印我的页面，第二个 div (#pic2) 就消失了。我只看到一个黑色矩形。见下图：

有没有办法让我的第二个 div 有一个不错的可打印版本？

提前致谢！

我做了这样的设计

如何用css遮盖背景？

我试过这样的代码

我使用的蒙版图像是

https://i.stack.imgur.com/fg2k5.png

https://i.stack.imgur.com/zmylJ.png

你们能告诉我我的代码有什么问题吗？我知道我可以只导入到 png，但我尝试使用 css

我正在尝试在完整的出血背景上创建一个垂直滚动的选框。滚动文本将包含在页面的中心，并且必须通过顶部和底部的渐变不透明度蒙版。

我可以在顶部或底部应用渐变蒙版，但不能同时应用。

有没有办法只用 CSS / HTML 做到这一点？

请参阅将不透明蒙版应用于容器底部的小提琴 - 目标是使该蒙版位于容器的顶部和底部。

我在旧版本的 Firefox (52.8.1) 和 Microsoft Edge (40.15063.674.0) 中将 svg 显示为 mask-image 时遇到问题。

在这个版本的 Firefox 中，我收到一个错误incorrect property value。svg 看起来像带有背景颜色的正方形和矩形。

在新版本的 Firefox 中，一切都很好，我在 Chrome 和 Opera 中将 svg 显示为掩码图像也没有问题。

这可能是什么原因？我知道 Edge 和 IE 一样好，但我预计 Firefox 会出现这样的问题，因为当时它部分支持 mask-image。

是否有解决此问题的方法？

的CSS：

这就是我的 svg 的外观：

是否可以使其<div>适合它的 css 蒙版尺寸？所以说掩码图像是 100px x 100px。是否可以<div>自动使 100px x 100px 变大？（不是放在style="width: 100px; height: 100px"div上）

我正在寻找类似的style="width: 100%; height: auto"东西。它不一定是一个<div>元素，它可以是任何东西（比如一个<img>可能？）

这里有一些东西可以玩（你们可以编辑这个吗？）：

如果你们不能编辑上面的，这里是一个你可以编辑的（在 Angular 中，我不确定我还能在哪里创建这样的东西？）

https://stackblitz.com/edit/angular-sw5zf7

我遇到了一个奇怪的问题，即 chrome 没有将某些图像与蒙版一致地应用。（一个图像按预期工作，而另一个则没有并呈现整个 div）。这两个图像在 Firefox 中都按预期工作（当 webkit 前缀被删除时）。

在下面的代码笔中，它以 base 64 编码图像（一只猫）开始，正确遮盖 div，3 秒后设置的超时将遮罩更改为心脏图像。此掩码未按预期应用。为了证明它是一个有效的图像，我在 3 秒后（成功）将该图像应用为背景图像。

https://codepen.io/anon/pen/PXYgNg

这是预期的行为吗？

背景

我允许用户在掩码图像中上传图像....

用户上传图像后，我将在掩码图像中填充用户上传的图像：

1.面具图像：

2.用户上传图片：

3.用户上传的面具上的图像[最终图像]：

代码笔： https ://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle：http: //jsfiddle.net/2xq8p0zy/

html

css

要求：

我想提供一个选项，将用户上传的图像移动到掩码图像中，如下面的小提琴：

http://jsfiddle.net/aLcb4sb5/或 链接

问题：

但目前在网站上，这两个图像都在移动....

当我在 mask1 中拖动上传图像的右侧部分时，在 mask2 中的上传图像正在拖动，但这不应该发生....

这是视频链接

此外，如果我仅在掩码 1 中上传图像并尝试拖动，图像将消失，但如果我在两个掩码中上传图像，则图像不会消失

视频链接2

代码笔： https ://codepen.io/kidsdial/pen/PVJQrz

编辑

是因为这两个图像水平和垂直重叠吗？

编辑 2

对于一些问题仍然不清楚，在下面的图片中，如果用户尝试拖动 B 部分，以及 B 部分，C 部分和 D 部分也拖动，但这不应该发生.....

我有一个不重复的元素background-imageat background-position: 4px 4px。图像是一个头像，右边是一个单独的段落，margin-left: 120px因此文本不会流过background-image. 我已经完成了对图像元素的效果，但是为了巩固我对 CSS 掩码的理解，我想确定如何在background-image. 这是我当前的代码（紫红色仅用于我的调试，现在在这里帮助可视化问题）：

设置mask-repeat: no-repeat;隐藏其他所有内容（例如子段落元素），并且大多数其他mask-repeat值只是重复圆形效果，如示例图像中所示。我一直在浏览 Mozilla Developer Network 的 Mask 文档，但似乎没有任何帮助。当然，我可以处理 CSS 生成的内容，但是我不会学到任何东西并限制我自己的设计能力。

如何仅使用 CSS 屏蔽元素的一部分而不隐藏元素的其余部分或其子元素？