7

我知道如何在 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>

我想让它支持跨浏览器。

4

1 回答 1

9

我遇到了类似的问题，经过一些研究，我想出了一个 SVG 解决方案。这支持 Firefox、Chrome、IE v9 和 IE v10。IE v9 及更高版本支持基本的 SVG，这里有一些来自微软网站的示例。

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

这是我所做的：

将所需的蒙版形状制作为mask.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 上运行良好，但三星 s3 上的本机浏览器没有呈现此代码。

虽然像caniuse这样的在线资源大部分都说支持android，但在原生浏览器上渲染失败。

于 2013-12-29T14:05:42.777 回答