css mask使用,背景透明,图片裁切

1 语法

css 复制代码
 mask: url(image.png);                        使用位图来做遮罩
 mask: url(image.svg#star);                   使用SVG图形中的形状来做遮罩
 mask: linear-gradient(#000 , transparent)    接受类似背景参数的渐变来做遮罩

2 示例

2.1 背景透明

css 复制代码
{
 background:  url(image.png) ;
 mask: linear-gradient(45deg, transparent, #000)
}

图片与mask生成的渐变的 transparent 的重叠部分,会变得透明,这里#000可以为任意颜色,效果相同

2.2 图片裁切

css 复制代码
{
 background:  url(image.png) ;
 mask:
    linear-gradient(135deg, transparent 20px, #000 0)
    top left,
    linear-gradient(-135deg, transparent 20px, #000 0)
    top right,
    linear-gradient(-45deg, transparent 20px, #000 0)
    bottom right,
    linear-gradient(45deg, transparent 20px, #000 0)
    bottom left;
mask-size: 50% 50%;
mask-repeat: no-repeat;
}
css 复制代码
{
 background:  url(image.png) ;
 mask:
    radial-gradient(#000 80px, transparent 80px );
}
相关推荐
陈随易几秒前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟7 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子14 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao30 分钟前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿28736 分钟前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端43 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz1 小时前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini1 小时前
wd-button组件阻止事件冒泡的
前端
炒毛豆1 小时前
vue3.4中的v-model的用法~
前端·vue.js
用户40812812003811 小时前
大文件分片上传和断点续传
前端