技术栈

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环境
相关推荐
Chennnng
1 小时前
键盘参数选购
前端·css·计算机外设
拜无忧
18 小时前
纯css,顺时针3d旋转基座(摩天轮效应)
前端·css
i_am_a_div_日积月累_
1 天前
css排除样式:not:has
前端·css
咬人喵喵
1 天前
网页开发的“三剑客”:HTML、CSS 和 JavaScript
javascript·css·html
BUG创建者
1 天前
thee.js完成线上展厅demo
开发语言·前端·javascript·css·html·css3·three.js
我有一棵树
1 天前
css 的回溯机制、CSS 层级过深的选择器会影响浏览器的性能
前端·css
光头程序员
1 天前
Vite 前端项目 - CSS变量智能提示
前端·css
晴殇i
2 天前
CSS Grid 与 Flexbox:现代前端布局的双子星
前端·css
曹卫平dudu
2 天前
一起学习TailWind Css
前端·css
加油乐
2 天前
css及js实现正反面翻转
前端·javascript·css
热门推荐
01GitHub 镜像站点02【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像(2025最新版)03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口(持续更新)04UV安装并设置国内源05React CVE-2025-55182漏洞排查与修复指南06Linux下V2Ray安装配置指南07BongoCat - 跨平台键盘猫动画工具08从入门到实战:Gemini 3 使用指南速览09本地部署阿里最新开源的Z-Image10在VSCode配置Java开发环境的保姆级教程(适配各类AI编程IDE)