普通元素使用内联mask元素的遮罩效果实例页面

展示

//zxx: Chrome等webkit浏览器不支持，表现为空白

代码

HTML：

<svg style="position: absolute; width: 0; height: 0;"> 
    <mask id="mask" maskContentUnits="objectBoundingBox">
        <ellipse cx=".5" cy=".5" rx=".4" ry=".2" fill="white"></ellipse>
        <rect x=".3" y=".1" width=".4" height=".8" rx=".1" ry=".1" fill="white"></rect>
    </mask>  
</svg>

<img src="1.jpg" class="mask-image" width="256" height="192">

CSS：

.mask-image {
    -webkit-mask-image: url(#mask);
    mask-image: url(#mask);
}