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

无心使然云中漫步2024-01-21 16:51

1 语法

css 复制代码

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

2 示例

2.1 背景透明

css 复制代码

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

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

2.2 图片裁切

css 复制代码

{
 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;
}

css 复制代码

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