简介
今天介绍一个小技巧,如何用css制作出毛玻璃效果
内容
先看效果图:
![]()
blur.png
blur.png
然我来说下制作思路, 首先我要说下blur的影响范围,它会使其本身以及其子元素的内容变模糊. 因此错误的做法会使得模糊背景上的文字也变模糊,如图:
eg2.png
解决办法发就是把图片和文字两者分离出来.这里采用伪元素的做法,把模糊背景图分离出来.代码如下:
.blur::after {
content: '';
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-attachment: fixed;
background-size: cover;
background-image: url(./../image/bg1.jpg);
filter: blur(20px);
z-index: -1;
}
其中这里需要注意的是 background-attachment: fixed ; background-size: cover;(缺一不可),正是靠这两个属性才使得背景模糊图和背景图比较完美衔接在一起,若不设置的话效果如下:
eg3.png
值得注意的地方就这两点,下面我把代码列出来.
-css :
body {
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url(./../image/bg1.jpg);
font-size: 19px;
font-family: 'Verdana', 'Arial';
}
.blur {
width: 650px;
position: relative;
box-shadow: 1px 1px 3px black;
border-radius: 20px;
padding: 50px;
margin: 120px auto;
overflow: hidden;
}
.blur::after {
content: ' ';
height: 100%;
width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background-attachment: fixed;
background-size: cover;
background-image: url(./../image/bg1.jpg);
filter: blur(15px);
z-index: -1;
}
-html :
<div class="blur">
<h1>WARFRAME</h1>
<p>The Grineer, with their endless clone armies, have plunged the system into chaos. There is only one force that can match them, you. You are Tenno, an ancient warrior, a master of gun and blade. You wield the mighty Warframes and command their
awesome powers. Forge your weapons. Gather like-minded Tenno and take the fight back to the Grineer. The Origin System needs you once again. Are you ready?</p>
</div>
