问题标签 [css-mask]

我正在玩-webkit-mask-box-imagecss属性。

这很好用。我最终得到了一个蒙版图像形状的红色元素。

唯一的问题是我需要大约 25 张不同的图像。我可以只加载 25 个不同的蒙版图像，但如果我可以只加载一个图像然后使用它类似于我重新定位或剪辑它的 CSS 精灵，那就太好了。

但是我想不出用掩码属性来做到这一点的好方法。可行吗？

我想出的一个解决方案是使用类似于这样的标记：

我没有使用背景图像并将其定位为精灵，而是使用 DIV 并将其定位在裁剪它的父 div 中。我认为这是一个不错的选择，但想知道是否已经为此设计了一个以 webkit 为中心的 CSS 属性。

对于我的移动桌面导航栏，我有背景按钮（默认）。在顶部，我使用 :after 插入一个具有背景（纯灰色）的元素，该元素在悬停时变为（lt. blue）和内容（url（image.alpha-png））或-webkit-mask-image。

我正在寻找一种在不支持 :after 或无法处理 -webkit-mask-image 的浏览器/设备上不显示任何内容（=默认背景图像）的方法。

我通过删除后备背景颜色（照顾 IE 7,8）让它适用于伪类，现在我正在寻找一个不在浏览器/设备上不显示灰色/蓝色背景的方法支持-webkit-mask-image（或它们不工作的-o/-ms/-moz-equivalents）

这是一些代码：

HTML：

CSS（我为所有其他浏览器保留了渐变和蒙版 CSS）：

由于 -webkit 是唯一提供图像掩码的供应商，我正在寻求以下帮助：

• 在非 webkit 设备上隐藏背景渐变
• 提供一些关于 FF、Opera 的好选择的信息...
• 关于为 alpha-png 切换图像掩码是否有意义的意见，这意味着必须为我的 CSS-sprite 创建一个“负面”

感谢帮助！

我以编程方式在 Web 服务器上生成蒙版图像，然后使用以下代码将其应用于 HTML 元素：

我怎样才能知道图像何时返回并完成下载，以便它不只是弹出到页面上？

我正在开发一个 iPad webview 项目，该项目需要一个滑块在两张图片上来回移动，在向左或向右滑动时显示一张或另一张。由于项目限制，我无法使用 jQuery。我目前在顶部有左图，上面有一个透明蒙版，当 -webkit-mask-position 增加时，它会显示更多的底部图片，当减少时，会显示更多的顶部（覆盖底部）。

我正在使用一个名为 Draggy ( https://github.com/jofan/Draggy ) 的 javascript 插件来回移动滑块，并希望使用其 onChange 函数调用来更新蒙版的位置，但我不能找出javascript调用“-webkit-mask-position”来挽救我的生命。

有任何想法吗？

PS：webkitMaskPosition 将 style="-webkit-mask: XX" 添加到元素中，我可以使用它（在 js 中填充其他值），但它确实有问题。我现在正在调查它。

哦，伙计，我明白了。

-285 是让它与滑块在图像上的位置对齐。我不知道我是否真的以正确的方式做这件事，但它奏效了。如果有人能想到更好/更有效的方法来做到这一点，请告诉我。

我知道如何通过使用图像来做到这一点，但它需要动态变化。使用颜色代替图像有什么技巧吗？似乎很少有关于使用 webkit 掩码的文档。

我在可以离线使用的 Chrome 扩展程序中使用它（即我不能为此使用 PHP）。

这应该是 SVG 的样子

这就是 SVG 在 Samsum Galaxy S3 上的 Android 4 本机浏览器上的样子

这就是它们嵌入页面的方式

知道如何解决吗？

更新：SVG

I am using the following implementation to mask an element using an SVG and some CSS.

This works fine across Chrome, Safari and Firefox. However, I'm hoping to animate some of the properties, and so I've been trying to bring the SVG inline into my HTML.

This is my inline SVG code:

And this is my updated CSS:

This implementation doesn't work across any browser. Any suggestions would be greatly appreciated.

我正在尝试使用 CSS 创建一个看起来像这样的工具提示：

这就是我试图解决它的方法：http: //jsfiddle.net/NXLuZ/

所以，基本上我正在使用 css3 掩码：

在常规显示器上看起来不错，但是当您在视网膜显示器上查看它或尝试放大时可以看到问题：

因为我使用渐变作为蒙版，所以当渐变中的颜色发生变化时，它看起来有点模糊。值得一提的是，圆角需要透明，因为背景不是固定在它后面的。

知道如何解决这个问题吗？

我有一个特殊情况，我使用 a-webkit-mask和 aradial-gradient在背景图片上创建小点。这些点的颜色transparent使得可以在点内看到背景图片。

现在出现了每个点中的颜色都有渐变的情况。

是否有可能检测每个点的平均颜色并应用显示纯色的 CSS 过滤器？

所以我想要的是当我有一个带有蓝色阴影的点时，我想应用一个只显示纯蓝色的过滤器。

以下是此类案例的屏幕截图：

在不为每个点添加单独的 div 并手动设置 CSS 背景颜色的情况下，这是否可以使用 CSS？还是我需要使用 WebGL？

我想要一个从两侧淡出 16px 的面具。

所以喜欢：16px fading in - white - 16px fading out。

我得到的是：DEMO

唯一的问题是它在中间不可见。我怎样才能解决这个问题？