实现div毛玻璃背景

最新推荐文章于 2024-07-22 09:30:52 发布

Pan-

最新推荐文章于 2024-07-22 09:30:52 发布

阅读量925

点赞数 1

分类专栏： css3 文章标签： css3 毛玻璃

本文链接：https://blog.csdn.net/baidu_35598207/article/details/78403627

版权

原文在我的博客☞实现div毛玻璃背景

毛玻璃效果

ios里毛玻璃效果的使用非常多，本文介绍一个实现div毛玻璃背景的方法

CSS3 Filter

CSS3的Filter主要用在图像的特效处理上，默认值为none，还有以下备选项：
1. grayscale灰度
2. sepia褐色
3. saturate饱和度
4. hue-rotate色相旋转
5. invert反色
6. opacity透明度
7. brightness亮度
8. contrast对比度
9. blur模糊
10. drop-shadow阴影
每一种效果大家可以自己试试，考虑一下可以用在哪些方面，
这里仅仅用到了其中的blur，帮助实现高斯模糊的效果。
兼容性我试了一下最新的火狐和Chrome效果都是可以的，IE不用说了…

filter:blur()

参数默认是0，单位px，不接受%，参数值的大小表示屏幕上以多少像素融在一起，所以值越大越模糊。

：before()

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
用它来添加模糊背景，具体用法可以看我另外一篇☞:before和:after

rgba()

毛玻璃背景上文字内容显示效果并不理想，无论字体颜色深或浅，看着总是怪怪的…因此还需要加上一层带色的半透明背景，一般是黑色，或白色。

示例：

毛玻璃效果.png
整体通过三层重叠实现，
最下面是模糊层.blur_box:before，设置z-index: -2。
中间是rgba层.rgba，设置z-index: -1。
最上面是内容层.blur_box，设置z-index: 0。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>毛玻璃效果</title>
</head>
<style>
*{

最低0.47元/天解锁文章

Pan-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现div毛玻璃背景

原文在我的博客☞实现div毛玻璃背景毛玻璃效果ios里毛玻璃效果的使用非常多，本文介绍一个实现div毛玻璃背景的方法CSS3 FilterCSS3的Filter主要用在图像的特效处理上，默认值为none，还有以下备选项： 1. grayscale灰度 2. sepia褐色 3. saturate饱和度 4. hue-rotate色相旋转 5. invert反色 6. opac
复制链接

扫一扫