css透明度、毛玻璃效果

.info{
    background-image: url(pineapple.jpg);
    width:300px;
    height:300px;
}
p{

    background-color: rgba(255,255,255,0.8);
    opacity:0.2;
    height:100px;
}

<div class="bg"><!--最外层包裹框，背景图片很鲜艳亮眼position:fixed-->
    <div class=‘blur-box‘>
       <!--登录表单框部分position:fixed-->
    </div>
</div>

.bg{
    background:url(1.jpg) no-repeat center center fixed;/* 与下面的 blur_box:before 中的 background 设置一样 */
    width:100%;
    height:100%;
}

.blur_box{
    z-index: 0;/* 为不影响内容显示必须为最高层 */
    position: relative;
    overflow: hidden;
}

.blur-box::before{
    content:‘‘;
    position:absolute;  /* 固定模糊层位置 */
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:url(1.jpg) no-repeat center center fixed;/* 与上面的 bg 中的background设置一样 */
    filter:blur(10px) contrast(.8);  /* 值越大越模糊 */
    z-index:-1;  /* 模糊层在最下面 */

　　/* 还可以设置 width、height 来设置模糊曾的宽和高 */

}