html - -webkit-mask 可以作用于元素(例如 div)

标签 html webkit css

尝试在 div 上使用一些 CSS 并将其屏蔽为特定形状。这个概念是创建一个 div,将该 div 蒙版成一个形状(比如人的剪影),然后将一些背景 css 渐变应用于该 div。本质上是获得一个人的渐变轮廓,我可以通过更改 css 颜色轻松更改颜色。

我一直在尝试 -webkit-mask (如下所示: masking an image )但似乎无法让它在 div/span/whatever 上工作

有人做过类似的事情吗?

最佳答案

为了跨浏览器兼容性,您需要将蒙版创建为您喜欢的形状的透明图像。请参阅下面我的链接。我在 Photoshop 中创建了一个三 Angular 形蒙版并将其应用到图像上。

检查工作示例 http://jsfiddle.net/39VG9/1/

关于html - -webkit-mask 可以作用于元素(例如 div),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5385864/

相关文章:

javascript - 根据设备的大小激活图像 slider

css - 使用百分比时 Chrome 中的转换位置不正确

javascript - 如何实现Flash的播放或暂停?

html - 向导响应问题

html - jquery 在列表中查找下一个类

asp.net - Header Div位置根据Content Div编辑

Javascript:从 HTML 输入返回值的问题

javascript - 使用 Javascript 在 Chrome 中强制重新加载页面 [无缓存]

css - 从 Rails 图像标记中调整图像大小

html - 图像定位