浅谈使用CSS遮罩与CSS线性渐变实现图片的斜线拼接


css mask的原理:只会把遮罩图里透明像素所对应的原图部分进行隐藏。

渐变图作为mask,置于另一张图片上面。

#mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("images/img2.jpg");
    background-size: cover;
    -webkit-mask-image: linear-gradient(120deg, transparent 50%, white 50%);
}