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，屏蔽和剪辑这里是微软网站的一些例子。

对于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/

移动支持：这在Android手机上的iPhone，iPad，Chrome上完全正常，但三星s3上的原生浏览器无法呈现此代码。

即使像caniuse这样的大多数在线资源都表示支持android，但它无法在本机浏览器上呈现。

如何使用跨浏览器支持制作掩码？

1 个答案: