javascript - 跨浏览器创建掩码

Question

我看到在 webkit 浏览器中有一些方法可以做到这一点，但我看不到在其他浏览器中可以做到这一点。这仅仅是一个尚未在所有浏览器中实现的功能吗？

我没有标准图片，所以剪辑无法使用。我可能必须提前渲染所有内容，这将使我的工作呈指数增长，但你处理你所拥有的，对吧？

我还希望能够从 javascript 激活这些东西。 :/

谢谢，如果你能提供支持。

Answer 1

就在我的脑海中 - 没有实际问题你需要我们解决 - 这是一个可能的方法来完成你想要的......

HTML

<div class="myImage">

    <img src="path_to_image" title="Lorem ipsum" alt="Dolar sit amet" />    

    <div class="myMask">
    </div><!-- /myMask -->

</div><!-- /myImage -->

CSS

.myImage {
    position: relative;
}

.myMask {
    position:absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: url('path_to_masking_image');
}

或者，使用 <img />在myMask里面div，并删除 background-image来自 CSS 的属性。

---

按照目前的布局方式，您需要两张图片:图片本身及其所有的荣耀，以及面具。

实现“ mask 效果”的方法是让 mask 图像成为静态纯色，与容器中的背景相匹配 - 即白色、黑色等。

卡佩什？这适用于所有浏览器，这正是您所要求的。 background-clip属性有 -webkit 和 -moz 选择器，但在 IE 或(据我所知)Opera 等浏览器中不受支持。