css实现毛玻璃效果——backdrop-filter

css实现毛玻璃效果——backdrop-filtercss3实现毛玻璃效果

css实现毛玻璃效果

毛玻璃效果

毛玻璃效果有朦胧美,很适合在以图片为底的文字展示。

用PS比较容易实现毛玻璃效果,网上也有很多教程。但是切图的方法总归有些限制,有局限性,不如直接用代码实现灵活。

在百度里搜索,扑面而来的好多都是使用 filter: blur() + background-attachment 属性 方法实现,个人觉得其实 backdrop-filter 属性更方便,代码量更少,也很好理解。

实际上,MDN上也是使用 backdrop-filter 属性实现的毛玻璃效果。

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)

参考网址——MDN Web Docs

filter方法

准备——首先给盒子背景图片:

.box{ 
   
    background: url('./img/bg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* p居中 */
    display: flex;
    align-items: center;justify-content: center;
}

之后需要给里面的文字框一个透明背景:

.box p{ 
   
    padding: 80px 60px;
    border-radius: 12px;
    background-color: rgba(255,255,255,.2);
}

接着实现毛玻璃效果,由于直接给p加上模糊效果会导致上面的文字也会变模糊不清。

所以需要曲线救国,给p标签的伪元素加模糊,但是又会导致看不见后面的图片背景。

所以又需要给伪元素加上背景图片。

.box p{ 
   
    padding: 80px 60px;
    font-size: 24px;border-radius: 12px;
    background-color: rgba(255,255,255,.2);
    position: relative;
    overflow: hidden;
}
.box p::before{ 
   
    content: '';
    // 伪元素大小与父元素一致
    position: absolute;
    top: 0;bottom: 0;left: 0;right: 0;

    background-color: rgba(255,255,255,.5);
    background: url('./img/bg1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

之后为了让伪元素位于父元素下方,需要给p标签加上z-index: 1,伪元素加上z-index: -1;
但又会发现伪元素内的图片与后面的图片不一致,有需要给伪元素加上background-attachment: fixed;属性才可。

之后给伪元素加上模糊:

filter: blur(10px);
-webkit-filter: blur(10px);

至此,实现模糊效果;你会发现这种方法太复杂,代码量大,考虑的因素多。
所以推荐下面这种方法:

backdrop-filter方法

这种方法是我在浏览MDN官网时发现的,官网上的示例就是backdrop-filte属性实现玻璃效果。-MDN:backdrop-filte

首先,给盒子加个图片,p标签加个透明背景。

.container{ 
   
    width: 400px;height: 400px;
    background: url('./img/bg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* p居中 */
    display: flex;
    align-items: center;justify-content: center;
}
.container p{ 
   
    padding: 40px 30px;
    font-size: 24px;border-radius: 12px;
    background-color: rgba(255,255,255,.2);
}

之后给p标签加个backdrop-filter: blur(15px);属性即可实现玻璃模糊效果!

加个投影效果会更好:

.container{ 
   
    width: 400px;height: 400px;
    background: url('./img/bg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* p居中 */
    display: flex;
    align-items: center;justify-content: center;
}
.container p{ 
   
    padding: 40px 30px;
    font-size: 24px;border-radius: 12px;
    background-color: rgba(255,255,255,.2);
    backdrop-filter: blur(15px);
    box-shadow: 0 0 10px #333;
}

在这里插入图片描述

今天的文章css实现毛玻璃效果——backdrop-filter分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/30003.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注