1 語法
mask: url(image.png); 使用位圖來做遮罩
mask: url(image.svg#star); 使用SVG圖形中的形狀來做遮罩
mask: linear-gradient(#000 , transparent) 接受類似背景參數(shù)的漸變來做遮罩
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;
}
文章來源：http://www.zghlxwxcb.cn/news/detail-797512.html
{
background: url(image.png) ;
mask:
radial-gradient(#000 80px, transparent 80px );
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-797512.html
到了這里，關(guān)于css mask使用，背景透明，圖片裁切的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
