简介

今天介绍一个小技巧,如何用css制作出毛玻璃效果

内容

先看效果图:

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>

结束