css - 如何制作具有跨浏览器支持的面具？

Question

我知道如何在 css 中做一个蒙版，但只有 chrome 和 safari 支持这个。这个有替代品吗？

这是我的代码:

<div class="character">
    <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
    <div class="green-mask"></div>
</div>
<style>
.green-mask {
    display: block;
    height: 200px;
    width: 508px;
    background: rgb(160, 255, 97);
    opacity: .3;
    position: absolute;
    top: 0;
    -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
</style>

我想让它支持跨浏览器。

Answer 1

我遇到了类似的问题，经过一番研究，我想出了一个 SVG 解决方案。这支持 Firefox、Chrome、IE v9 和 IE v10。 IE v9 及更高版本支持基本的 SVG、屏蔽和裁剪，此处是来自 Microsoft 站点的一些示例。

对于 IE8:我使用了本教程中提到的色度键过滤器:http://thenittygritty.co/css-masking

这是我做的:

制作所需的蒙版形状为 ma​​sk.png 并使用 SVN 蒙版应用在 sample.jpg 之上，如下所示:

    <div class="svgMask">
        <svg width="400" height="300" baseProfile="full" version="1.2">
            <defs>
                <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="mask.png"/>
                </mask>
            </defs>
            <image mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="sample.jpg"/>
        </svg>
    </div>

我在这里放了一个 JSFiddle:http://jsfiddle.net/giri_jeedigunta/Z2J34/

移动支持:这在 iPhone、iPad、Android 手机上的 Chrome 上运行良好，但 samsung s3 上的 native 浏览器未呈现此代码。

即使像caniuse这样的大部分在线资源都说支持android，但它无法在 native 浏览器上呈现。