因此，我们很少使用jpg图片来作为遮罩图片的，因为jpg图片一定是完全不透明的，最终的效果就是原图什么也看不到。
另外，如果loading.png加载失败，则Firefox，Chrome浏览器下直接原始图不显示。
接着我们再来看一个SVG图形遮罩效果展示。
css代码如下：
.mask-image {
width: 250px; height: 187.5px;
-webkit-mask-image: url(star.svg);
mask-image: url(star.svg);
}html代码如下：
<img src="ps1.jpg" class="mask-image">最终的效果和上图相似。
上面是将svg作为背景图来实现的，现在我们再使用SVG图形中<mask>元素作为遮罩元素来实现它。
CSS 代码如下：
.mask-image {
width: 250px; height: 187.5px;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
/* Firefox外链也支持 */
/* mask-image: url(ellipse-rect.svg#mask); */
}html代码如下：
<svg>
<defs>
<mask id="mask" maskContentUnits="objectBoundingBox">
<!-- 柔化边缘 -->
<ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
<rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
<!-- 主体遮罩 www.xttblog.com -->
<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>
</defs>
</svg>
<img src="ps1.jpg" class="mask-image">再使用SVG元素内联SVG的<mask>，看下面的实现。
CSS 代码：
.mask-image {
width: 250px; height: 187.5px;
-webkit-mask-image: url(#mask);
mask: url(#mask);
mask-image: url(#mask);
/* Firefox外链也支持 */
/* mask-image: url(ellipse-rect.svg#mask); */
}SVG实现的代码：
<svg>
<defs>
<mask id="mask" maskContentUnits="objectBoundingBox">
<!-- 柔化边缘 www.xttblog.com-->
<ellipse cx=".5" cy=".5" rx=".48" ry=".28" fill="black"></ellipse>
<rect x=".2" y="0" width=".6" height="1" rx=".1" ry=".1" fill="black"></rect>
