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

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 );
}
相关推荐
萌萌哒草头将军5 分钟前
Prisma ORM 又双叒叕发布新版本了!🚀🚀🚀
前端·javascript·node.js
mldong33 分钟前
推荐一款超高颜值的后台管理模板!Art-Design-Pro!开源!免费!
前端·vue.js·架构
草字37 分钟前
uniapp 如果进入页面输入框自动聚焦,此时快速返回页面或者跳转到下一个页面,输入法顶上来的页面出现半屏的黑屏问题。
java·前端·uni-app
程序视点1 小时前
Wise Duplicate Finder 重复文件查找工具 - 永久免费专业版文件去重工具
前端·windows
一点一木2 小时前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的2 小时前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
ayas123192 小时前
CSS学习
前端·css·学习
土族程序员2 小时前
JavaFX CSS @font-face 错误全面分析 loadStylesheetUnPrivileged / reportException
java·css·javafx
人生在勤,不索何获-白大侠2 小时前
day25——HTML & CSS 前端开发
前端·css·html
Running_C2 小时前
Content-Type的几种类型
前端·面试