技术栈

CSS遮罩:mask

koiy.cc2024-11-20 23:33

CSS属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

css 复制代码
// 一般用位图图片做遮罩
mask: url('~@/assets/images/mask.png');
mask-size: 100% 100%;

// 使用 SVG 图形中的形状来做遮罩 
mask: url('~@/assets/images/mask.svg#star');  

// 使用渐变来做遮罩
mask: linear-gradient(#000, transparent)


上一篇:linux配置动态ip
下一篇:QT基础 信号与槽 QT5.12.3环境
相关推荐
里欧跑得慢
14 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
凯瑟琳.奥古斯特
18 小时前
Redis是什么及核心特性
前端·css·redis·缓存
DFT计算杂谈
18 小时前
VASP官方教程 TRIQS DFT+DMFT计算教程
运维·css·自动化·html·css3
可达鸭小栈
1 天前
易语言实现CSS像素文字生成器:无需字体文件渲染汉字
前端·css
yqcoder
1 天前
CSS 迷思破解:`:nth-child` vs `:nth-of-type`
前端·css
遇见~未来
1 天前
第六篇_CSS进阶_深入浏览器与工程化
前端·css·rust
xingpanvip
1 天前
星盘接口开发文档:日运语料接口指南
android·开发语言·前端·css·php·lua
之歆
1 天前
Day05_CSS完整博客笔记(下)
前端·css·笔记
之歆
1 天前
Day05_CSS完整博客笔记(上)
前端·css·笔记
ZC跨境爬虫
1 天前
跟着 MDN 学 HTML day_7:(进阶文本语义标签全覆盖)
前端·javascript·css·ui·html
热门推荐
01要裂开了!ChatGPT要手机号验证了?注册Codex要求验证电话号码怎么办?2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03【AI】2026 年具身智能模型和世界模型总结04裂开!ChatGPT 居然开始要手机号验证,附详细解决方法05Codex 接入 DeepSeek API 完整配置文档062026年AI前瞻:量子AI、具身智能与科学发现的新纪元07零基础教你claude code 接入 deepseek V408在Windows 11上安装Docker的踩坑记录09实测可用|小米 MiMo 百万亿 Token 免费领,开发者速冲102026年4月AI大事件深度解读:大模型竞争进入“深水区“