CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

方法说明
涉及mask的类名
该简写所对应的每个属性：
mask-image: none
mask-mode: match-source
mask-repeat: repeat
mask-position: 0% 0%
mask-clip: border-box
mask-origin: border-box
mask-size: auto
mask-composite: add

具体使用方法与background的使用方法是一样的

mask-image: url(…/images/xinzhimgfz1.svg);
-webkit-mask-image: url(…/images/xinzhimgfz1.svg);
mask-position: right bottom;
-webkit-mask-position: right bottom;
mask-size: cover;
-webkit-mask-size: cover;

代码

<style>
    .image-with-reflection {
        position: relative;
		width: 500px;
		
    }
	.image-with-reflection img{
		width: 100%;
	}
	.mask-my {
		 mask: url(./images/wf_logo.png) center / 100% auto no-repeat;
	}
</style>
<!-- 没有剪切前 -->
<div class="image-with-reflection">
    <img src="./al2.jpg" alt="Your Image">
</div>
<!-- 剪切后 -->
<div class="image-with-reflection mask-my">
    <img src="./al2.jpg" alt="Your Image">
</div>

兼容性