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;
}
文章来源：https://www.toymoban.com/news/detail-797512.html
{
background: url(image.png) ;
mask:
radial-gradient(#000 80px, transparent 80px );
}
文章来源地址https://www.toymoban.com/news/detail-797512.html
到了这里，关于css mask使用，背景透明，图片裁切的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
