css mask使用,背景透明,图片裁切

1 语法

 mask: url(image.png);                        使用位图来做遮罩
 mask: url(image.svg#star);                   使用SVG图形中的形状来做遮罩
 mask: linear-gradient(#000 , transparent)    接受类似背景参数的渐变来做遮罩

2 示例

在这里插入图片描述

2.1 背景透明

{
 background:  url(image.png) ;
 mask: linear-gradient(45deg, transparent, #000)
}

在这里插入图片描述
图片与mask生成的渐变的 transparent 的重叠部分,会变得透明,这里#000可以为任意颜色,效果相同

2.2 图片裁切

{
 background:  url(image.png) ;
 mask:
    linear-gradient(135deg, transparent 20px, #000 0)
    top left,
    linear-gradient(-135deg, transparent 20px, #000 0)
    top right,
    linear-gradient(-45deg, transparent 20px, #000 0)
    bottom right,
    linear-gradient(45deg, transparent 20px, #000 0)
    bottom left;
mask-size: 50% 50%;
mask-repeat: no-repeat;
}

在这里插入图片描述

{
 background:  url(image.png) ;
 mask:
    radial-gradient(#000 80px, transparent 80px );
}

在这里插入图片描述