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)


相关推荐
牧码岛1 小时前
Web前端之隐藏元素方式的区别、Vue循环标签的时候在同一标签上隐藏元素的解决办法、hidden、display、visibility
前端·css·vue·html·web·web前端
棉花糖超人3 小时前
【从0-1的CSS】第1篇:CSS简介,选择器已经常用样式
前端·css
potender5 小时前
前端基础学习html+css+js
前端·css·学习·html·js
Hilaku5 小时前
你以为的 Tailwind 并不高效,看看这些使用误区
前端·css·前端框架
Hilaku5 小时前
为什么越来越多 Vue 项目用起了 UnoCSS?
前端·css·html
中微子5 小时前
☀️这些CSS里的选择器你知道多少❓
css
Larcher5 小时前
css真难,那就从基础开始吧
前端·css
Linsk5 小时前
深入解析 Sass 的 `~` 路径问题:为什么你的导入会失败?
css·scss·前端工程化
站在风口的猪11086 小时前
《前端面试题:CSS3新特性》
前端·css·html·css3·html5
ayuday8 小时前
stylus - 新生代CSS预处理框架
css·stylus