技术栈

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环境
相关推荐
前端Hardy
3 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy
3 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君
6 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
小帆聊前端
10 小时前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
谢尔登
10 小时前
【CSS】层叠上下文和z-index
前端·css
Alice-YUE
11 小时前
【CSS学习笔记3】css特性
前端·css·笔记·html
睡不着先生
11 小时前
CSS `:has()` 实战指南:让 CSS 拥有“if 逻辑”
css
yddddddy
21 小时前
css的基本知识
前端·css
昔人'
21 小时前
css `lh`单位
前端·css
2501_91812691
1 天前
用html5写一个flappybird游戏
css·游戏·html5
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03UV安装并设置国内源04Claude Code 平替:OpenAI发布 Codex CLI ,GPT-5 国内直接使用0546个Nano-banana 精选提示词,持续更新中06A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程07conda中设置镜像地址(附所有可换的地址)08保姆级教程:手把手教你用Dify实现完美多轮对话(附Chatflow和提示词)09KGG转MP3工具|非KGM文件|解密音频10解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题