当前位置: 首页 > article >正文

CSS遮罩:mask

CSS属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

// 一般用位图图片做遮罩
mask: url('~@/assets/images/mask.png');
mask-size: 100% 100%;

// 使用 SVG 图形中的形状来做遮罩 
mask: url('~@/assets/images/mask.svg#star');  

// 使用渐变来做遮罩
mask: linear-gradient(#000, transparent)

使用mask的效果图
未使用mask的效果图


http://www.kler.cn/a/406350.html

相关文章:

  • Diving into the STM32 HAL-----DAC笔记
  • 小鹏汽车智慧材料数据库系统项目总成数据同步
  • 1、HCIP之RSTP协议与STP相关安全配置
  • Android 网络通信(三)OkHttp实现登入
  • 「甲子光年」对话黄翔:从电子签回望中国SaaS“黄金十年”
  • Qt之QWidget相关
  • 使用minio cllient(mc)完成不同服务器的minio的数据迁移和mc基本操作
  • stm32 指定变量存储地址
  • 利用Python爬虫获取1688搜索词推荐:技术与实践
  • P1308 [NOIP2011 普及组] 统计单词数题解
  • [开源重构]Search(Elasticsearch/OpenSearch) Sync Tool
  • c++基础语法
  • shell脚本(三)
  • Java教程:SE进阶【十万字详解】(中)
  • 移动语义和拷贝语义的区别以及智能指针
  • 数据结构--并查集
  • 比rsync更强大的文件同步工具rclone
  • 解析粗糙度仪在工业制造及材料科学和建筑工程领域的重要性
  • 半导体工艺与制造篇5 光刻
  • 40分钟学 Go 语言高并发:并发下载器开发实战教程
  • 「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
  • 倒计时功能分享
  • 数据结构-8.Java. 七大排序算法(上篇)
  • Linux 手动升级软件保姆级教程,适用所有软件,不限于麒麟等国产系统
  • 【Golang】协程
  • 迁移学习理论与应用