1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。
假如页面有一个背景和一个透明的盒子,我们先将盒子范围内的背景截取下来,在透明盒子之后设置一个伪元素用绝对定位格式化长宽让其跟透明盒子一样大小,在将伪元素背景设置为刚刚截取的图片设置模糊、设置z-index让伪元素在透明盒子之后,在给透明盒子设置一点阴影就好了。核心代码如下
1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。
假如页面有一个背景和一个透明的盒子,我们先将盒子范围内的背景截取下来,在透明盒子之后设置一个伪元素用绝对定位格式化长宽让其跟透明盒子一样大小,在将伪元素背景设置为刚刚截取的图片设置模糊、设置z-index让伪元素在透明盒子之后,在给透明盒子设置一点阴影就好了。核心代码如下