拙见
工具应用
前端技术
AI技术
其他知识
编程知识
CSS新用法 - mask、CSS嵌套语法🎐
type
status
date
slug
summary
tags
category
icon
password
mask
解释:会用Photoshop的我解释为“剪贴蒙版”,不会用Photoshop的解释为通过遮罩或者裁切特定区域的图片的方式,来隐藏一个元素的部分或者全部可见区域。
比如我有两个图,要遮罩的图必须要有缝隙,不让无法透过前面的图看到后面的背景,我这里的第二个图就是背景透明的
![notion image](https://i0.hdslb.com/bfs/article/12501b6c6902ef930cdc6fe935b26e4a30109107.png?t=d610a17f-e075-4d42-aba3-726453511997)
可能这种效果基本没什么用,那来说一个比较有用的操作
我们有这样一张图片,现在需要在上面加上文字,由于背景复杂导致文字边缘很难看清,继而导致了文字的易读性并没有那么好
![notion image](https://i0.hdslb.com/bfs/article/f84b6200b7345f7ff8d0acaa092d79eb30109107.png?t=234bf400-245b-4ea2-a07a-7041c730bd11)
这时我们可能会想到使用
backdrop-filter
加一个毛玻璃效果![notion image](https://i0.hdslb.com/bfs/article/db5c09acfef88a77f0169ddb76ad170c30109107.png?t=388628a7-d6e2-4a1e-b7b6-f40516d4594d)
一个矩形的毛玻璃效果显然非常突兀,因为可以明显感知到div和背景的边界,这时候我们就可以利用mask做一个羽化效果
![notion image](https://i0.hdslb.com/bfs/article/b2a7feb0e7d8a3c86885621393db41d130109107.png?t=a0a4fbc7-4daa-465b-8ef3-156eb368563e)
这里mask后面的url是什么呢,其实是一个图,一个用css绘制的图
![notion image](https://i0.hdslb.com/bfs/article/1f76cf0c5a3da5cd8840f382760e013130109107.png?t=4ca8783c-83eb-457a-9286-5fd6ff15a123)
讲一下如何制作这个图,知道了如何制作,就可以自定义这个羽化边缘的半径了,就可以自行控制边缘是锐利些还是模糊些。
首先我们用css写一个这样的元素,不难对吧
我们再利用foreignObject元素,通过这个元素,可以将
HTML
嵌入到SVG
中,轻松实现 dom
转图片的效果。回到这里,我们仅需要将上面的结果放到foreignObject
元素中,由于需要自适应尺寸,这里的body
宽高都是100%
如下
有了图片,我们就可以
当然我们可以不引入svg,这里推荐张鑫旭老师的SVG在线压缩合并工具,将这个转换一下,就有了上面那段代码,
当然这个阴影需要距离文字多远之类的各种尺寸数据,都是css调整的,或许你可以调整的更好
或者是用mask做一个Loading的图标
CSS嵌套语法 - Chrome112+
解释:如scss、less一般的嵌套css写法
常规写法下,选中a里面的b里面的c,需要这样写,即便是预处理器嵌套着写,最后生成的其实也是这样的代码
而现在,css原生支持嵌套写法了
总结:嵌套类不加&符号会产生后代选择器。使用&符号可以改变这种结果。它明确显示了如何连接嵌套选择器
无效的嵌套示例
目前来看,css的嵌套写法还没有预处理器强大,但是胜在不用编译,以下的写法是无效的(详见w3c)
Last update: 2023-04-13