标签：box 元素 模糊 透明度 毛玻璃 background blur css 255

 透明度：

1、opacity    背景颜色和字体同时透明

2.background:rgba(255,255,255,0.2);   只是背景颜色透明，字体不透明

 代码：

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

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

毛玻璃效果：CSS filter

• 模糊背景部分，  应用了filter:blur(size)的元素的所有子孙元素都会被模糊处理（不是因为继承），即使子孙元素脱离了该元素的文档流也不能避免。

• 只对login-box背后部分模糊处理。解决方案是在login-box下层加一个与之重叠的元素，对此元素应用filter:blur(<blur_size>);，可以选择用伪元素：

 代码：

<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 来设置模糊曾的宽和高 */

}    

标签：box,元素,模糊,透明度,毛玻璃,background,blur,css,255
来源： https://www.cnblogs.com/luwanying/p/10469886.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。