css3揭秘读书笔记--毛玻璃效果

　　毛玻璃效果就是将一个半透明的文本框叠放在一个背景图片上，如果色调配个得当，该效果还是有着较强的视觉冲击力。常用方法是通过设置文本框的背景透明度，代码如下：

　　

<div class="bg">
    <div class="text">这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习    
        </div>
</div>    
.bg{
    background:url("../img/5.jpg");
    background-size:100% 100%;
    width:700px;
    height:400px;
    padding:50px 40px;
}
.text{
    width:620px;
    height:300px;
    background:hsla(0,0%,100%,.4);
}

　　　　该方法通过设置文本框的透明度来添加一个模糊层，还有一种方式是通过blue（）滤镜来处理。

<div class="bg">
    <div class="text">这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习这里是毛玻璃练习
    </div>
</div>
.text{
    width:620px;
    height:300px;
    position:relative;
    background:hsla(0,0%,100%,.3);
}
.text::before{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    filter:blur(20px);
}

 

转载于:https://www.cnblogs.com/OnePieceKing/p/11251525.html