技术栈

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环境
相关推荐
星空寻流年
2 小时前
css3伸缩盒模型第二章(侧轴相关)
javascript·css·css3
2501_90713682
4 小时前
CSS 学习与工程化实践指南
css
bigHead-
11 小时前
9. 从《蜀道难》学CSS基础:三种选择器的实战解析
前端·css
2401_83708850
12 小时前
CSS transition过渡属性
前端·css
我爱吃朱肉
12 小时前
深入理解 CSS Flex 布局:代码实例解析
前端·css
未来之窗软件服务
14 小时前
智慧农业运维平台养殖—传感器管理监控设计—仙盟创梦IDE
运维·css·ide·仙盟创梦ide
Joker Zxc
21 小时前
【前端基础】9、CSS的动态伪类(hover、visited、hover、active、focus)【注:本文只有几个粗略说明】
前端·css
2401_83708850
21 小时前
CSS flex:1
前端·css
Python智慧行囊
1 天前
前端三大件---CSS
前端·css
聆听+自律
1 天前
css实现渐变色圆角边框,背景色自定义
前端·javascript·css
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04数据分析实战 | K-means算法——蛋白质消费特征分析05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高,一键全文降!文件格式不变,公式都保留的!06西电B测-计算机网络综合实验(含验收问题)07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08苍穹外卖面试总结09DeepSeek各版本说明与优缺点分析10Coze扣子平台完整体验和实践(附国内和国际版对比)