CSS遮罩:mask

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)


相关推荐
绅士玖11 小时前
🚀 前端布局新纪元:一文搞懂 CSS Grid 布局 🧩
前端·css
yqcoder12 小时前
33. css 如何实现一条 0.5 像素的线
前端·css
hqxstudying15 小时前
前后端交流
java·css·后端·html·json
典学长编程17 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第四天(DOM编程和AJAX异步交互)
javascript·css·ajax·html·dom编程·异步交互
前端Hardy18 小时前
HTML&CSS:超丝滑抛物线飞入购物车效果
前端·javascript·css
tager18 小时前
告别布局烦恼!H5自适应布局最佳实践
前端·css·前端框架
namehu18 小时前
为什么我的margin-top被转换为vw而不是vh?
javascript·css·postcss
啃火龙果的兔子21 小时前
CSS 预处理器(Preprocessor)和后处理器(Postprocessor)
前端·css
典学长编程1 天前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
南方kenny2 天前
CSS Grid 布局:从入门到精通,打造完美二维布局
前端·javascript·css