CSS实现毛玻璃效果

思路

在需要进行毛玻璃处理的元素上,使用滤镜blur()进行模糊处理。

困难

仅仅针对该元素使用滤镜,会将整个元素的文字一并模糊,而需要模糊的被元素覆盖的背景部分反而没有被模糊。

解决

为了解决这个问题,参考资料给出的方法是使用伪元素覆盖在该元素上,再在该伪元素上使用同样的背景图片,并设置绝对定位,上下左右的外边距都设成0,以完全覆盖在元素上。

具体实现

  1. 将一张图片设成body元素的背景:
body{
    background-image: url("http://pic1.win4000.com/wallpaper/f/5429075a60431.jpg");
}
  1. 定义一个.main,进行一些样式的编写:
.main{
    height:600px;
    width:1000px;
    color: #282c34;
    border-radius: 5px;
    position:relative;
    top:100px;
    margin:0 auto;
    padding:1em;
    font-size:28px;
    font-style: italic;
    line-height: 2em;
    background-color: rgba(255, 255, 255,.08);
    overflow: hidden;
}

在这里,overflow: hidden;表示伪元素的模糊如果有溢出就将溢出部分裁掉,这样可以避免使模糊作用扩展到制定元素边框之外,达到美化的目的;

  1. .main设置一个before伪元素,使用绝对定位,上下左右的外边距margin均为0,这样可以保证伪元素完全覆盖该元素:
.main::before{
    content: '';
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("http://pic1.win4000.com/wallpaper/f/5429075a60431.jpg");
    background-attachment: fixed;
    background-size: cover;
    -webkit-filter: blur(25px);
    filter:blur(25px);
    z-index: -1;
    margin: -50px;
}

这里的背景应该和body的背景设成同样的图片,需要用到background-attachmentbackground-size两个属性,确保伪元素的背景图片完全伸展直到与body左边界和上边界对齐(即伪元素的背景图片与body的背景图片完全重合),而不是以该元素的左边界和上边界重合。然后将伪元素的z-index设为-1,使其位于该元素的底部,以免覆盖元素的其他内容,如文字或者其他元素。margin: -50px;是为了让伪元素的模糊效果填满整个元素,否则将会出现边缘的内部模糊不到位的情况,影响美观。

全部代码

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="glass.css">
    <title>Glass</title>
</head>
<body>
    <div class="main">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>
</html>
CSS
*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url("http://pic1.win4000.com/wallpaper/f/5429075a60431.jpg");
}
.main{
    height:600px;
    width:1000px;
    color: #282c34;
    border-radius: 5px;
    position:relative;
    top:100px;
    margin:0 auto;
    padding:1em;
    font-size:28px;
    font-style: italic;
    line-height: 2em;
    background-color: rgba(255, 255, 255,.08);
    overflow: hidden;
}
.main::before{
    content: '';
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url("http://pic1.win4000.com/wallpaper/f/5429075a60431.jpg");
    background-attachment: fixed;
    background-size: cover;
    -webkit-filter: blur(25px);
    filter:blur(25px);
    z-index: -1;
    margin: -50px;
}

效果

http://lenconda.top/images/17110204.png

参考

[1].《CSS揭秘》 [希腊]Lea Verou 著,CSS魔法 译

将最新的文章发送到你的邮箱

展示评论