UI小姐姐說(shuō)我用CSS實(shí)現(xiàn)毛玻璃效果的樣子很帥
點(diǎn)擊上方?前端陽(yáng)光，關(guān)注公眾號(hào)
回復(fù)加群，加入技術(shù)交流群交流群
前言
UI小姐姐問(wèn)我，能不能做出透明加模糊的背景，而我當(dāng)然是二話不說(shuō)就說(shuō)可以。因?yàn)槲矣X(jué)得沒(méi)有什么是css實(shí)現(xiàn)不了的。更何況我要在她面前展現(xiàn)得我很厲害的樣子。
開(kāi)發(fā)起來(lái)
果不其然，在我打開(kāi)藍(lán)湖后，發(fā)現(xiàn)屬性都給我提供好了
于是我立即將這份代碼ctr c，然后ctr v，一番豐功偉績(jī)立馬就完成了，效果也是杠杠滴。
然后興高采烈地交付給UI小姐姐查看了。小姐姐也說(shuō)可以。
出于職業(yè)素養(yǎng)，我馬上拿起我在pdd上9.9買(mǎi)的iphone13手機(jī)（當(dāng)時(shí)也就邀請(qǐng)了我老家整個(gè)鎮(zhèn)子的人來(lái)幫我砍一刀吧）查看效果，哇塞真機(jī)效果不錯(cuò)啊
但是等到驗(yàn)收，UI小姐姐就告訴我安卓顯示有問(wèn)題。
然后我馬上查看了一下backdrop-filter的兼容性。
果然，又是一個(gè)兼容性問(wèn)題的屬性。
只能放棄了，好可惜，本來(lái)用一個(gè)屬性就能完成需求了。
好的，問(wèn)題不大，印象中還有一個(gè)屬性也可以實(shí)現(xiàn)模糊效果，叫filter來(lái)著，試試看怎么用它來(lái)實(shí)現(xiàn)吧。
建立一個(gè)html文件來(lái)模擬一下吧
<head>
?<style>
??html,
??body?{
???margin:?0;
???width:?100%;
???height:?100%;
???background:?url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);
???background-size:?100%?100%;
???overflow:?hidden;
??}
??.card?{
???margin:?100px?auto;
???width:?300px;
???height:?300px;
???position:?relative;
???border:?1px?solid?#000;
???color:?white;
??}
?style>
head>
<body>
?<div?class="card">
??123123123123123123123123123123123123123123123123123123123123123123123123123123123123
?div>
body>
html>
如圖所示，現(xiàn)在是只有一個(gè)框框。
然后我，稍加修飾，用下fitler。
<html?lang="en">
?<style>
??html,
??body?{
???margin:?0;
???width:?100%;
???height:?100%;
???background:?url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);
???background-size:?100%?100%;
???overflow:?hidden;
??}
??.card?{
???margin:?100px?auto;
???width:?300px;
???height:?300px;
???position:?relative;
???border:?1px?solid?#000;
???color:?white;
???filter:?blur(10px);
???background-color:?rgba(0,0,0,.3);
??}
?style>
<body>
?<div?class="card">
??123123123123123123123123123123123123123123123123123123123123123123123123123123123123
?div>
body>
html>
模糊了嗎？確實(shí)模糊了。但是有毛玻璃效果嗎？沒(méi)有，毛都沒(méi)有。我們看下 用backdrop-filter是什么效果的。
.card?{
??margin:?100px?auto;
??width:?300px;
??height:?300px;
??position:?relative;
??border:?1px?solid?#000;
??color:?white;
??backdrop-filter:?blur(10px);
??background-color:?rgba(0,0,0,.3);
}
看，這才是毛玻璃的效果好吧？為什么filter就不行了？google一下下。
果然，和我猜測(cè)的一樣（馬后炮）
那該怎么樣才能模擬呢？
因?yàn)槭菍?duì)圖片效果才能模糊，想到一個(gè)好方法，就是我們要是能取父盒子的背景圖片的一塊 做為背景就好了。
例如，在這里我們?nèi)∷髀〉陌霃埬樧鳛閏ard盒子的背景。
該怎么?。?/p>
這就有一個(gè)屬性要登場(chǎng)啦。
background-attachment:fixed
背景圖片相對(duì)于視口固定，就算元素有了滾動(dòng)條，背景圖也不隨內(nèi)容移動(dòng)。
fixed用法如下：
<style>
body{
????background-image:?url(img/cartooncat.png);
????background-position:?bottom?left;
????background-attachment:?fixed;
????background-repeat:?no-repeat;
????height:?1000px;
}
style>
head>
<body>
????<h1>下拉看效果：h1>
body>
另一個(gè)作用是，它可以「近似于」取父元素背景圖的某一塊區(qū)域。
也就是我們上面所做的假設(shè) 「就是我們要是能取父盒子的背景圖片的一塊 做為背景就好了」
<html?lang="en">
?<style>
??html,
??body?{
???margin:?0;
???width:?100%;
???height:?100%;
???background:?url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);
???background-size:?100%?100%;
???overflow:?hidden;
??}
??.card?{
???margin:?200px?auto;
???width:?300px;
???height:?300px;
???position:?relative;
???border:?1px?solid?#000;
???color:?white;
???backdrop-filter:?blur(10px);
???background-color:?rgba(0,0,0,.3);
??}
??.card::before?{
???content:?'?';
???position:?absolute;
???top:?0;
???right:?0;
???bottom:?0;
???left:?0;
???z-index:?0;
???/*?filter:?blur(10px);?*/
???background:?url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0)?no-repeat?center;
???/*?background-attachment:?fixed;?*/
???background-size:?cover;?
???margin:?-20px;
??}
?style>
<body>
?<div?class="card">
??123123123123123123123123123123123123123123123123123123123123123123123123123123123123
?div>
body>
html>
看看沒(méi)有使用background-attachment: fixed的情況
再看看使用的情況
.card::before?{
???content:?'?';
???position:?absolute;
???top:?0;
???right:?0;
???bottom:?0;
???left:?0;
???z-index:?0;
???/*?filter:?blur(10px);?*/
???background:?url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0)?no-repeat?center;
???background-attachment:?fixed;
???background-size:?cover;?
???margin:?-20px;
??}
可以看取到的差不多就是那塊區(qū)域。
再看看模糊效果啦。
可以看到 毛玻璃還原度 已經(jīng)很明顯了，但是呢因?yàn)樵O(shè)計(jì)稿的背景原本是顏色的，現(xiàn)在換成了圖片，我們需要換成顏色的話，就需要再添加一個(gè)偽元素來(lái)模擬顏色。
.card::after?{
???content:?'?';
???position:?absolute;
???top:?0;
???right:?0;
???bottom:?0;
???left:?0;
???z-index:?0;
???background-color:?rgba(0,?0,?0,?0.2);
??}
看，很完美了。
但是文字被覆蓋了，所以我們需要提升文字的層級(jí)
<html?lang="en">
?<style>
??html,
??body?{
???margin:?0;
???width:?100%;
???height:?100%;
???background:?url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);
???background-size:?100%?100%;
???overflow:?hidden;
??}
??.card?{
???margin:?100px?auto;
???width:?300px;
???height:?300px;
???position:?relative;
???border:?1px?solid?#000;
???color:?white;
???backdrop-filter:?blur(10px);
???background-color:?rgba(0,0,0,.3);
??}
??.text?{
???position:?relative;
???z-index:?1;
??}
??.card::before?{
???content:?'?';
???position:?absolute;
???top:?0;
???right:?0;
???bottom:?0;
???left:?0;
???z-index:?0;
???filter:?blur(10px);
???background:?url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0)?no-repeat?center;
???background-attachment:?fixed;
???background-size:?cover;?
???margin:?-20px;
??}
??.card::after?{
???content:?'?';
???position:?absolute;
???top:?0;
???right:?0;
???bottom:?0;
???left:?0;
???z-index:?0;
???background-color:?rgba(0,?0,?0,?0.2);
??}
?style>
<body>
?<div?class="card">
??<div?class="text">123123123123123123123123123123123123123123123123123123123123123123123123123123123123div>
?div>
body>
html>
完美。
然后，我馬上跟UI小姐姐說(shuō)我做好了。驗(yàn)收通過(guò)，不知道UI小姐姐愛(ài)上我了沒(méi)有。
結(jié)尾
已上大多數(shù)內(nèi)容是來(lái)自一個(gè)渴望愛(ài)情又得不到愛(ài)情，敲代碼還總報(bào)錯(cuò)的小傻瓜的 yy，真實(shí)故事與UI小姐姐無(wú)關(guān)
技術(shù)交流群我組建了技術(shù)交流群，里面有很多?大佬，歡迎進(jìn)來(lái)交流、學(xué)習(xí)、共建?；貜?fù)?加群?即可。后臺(tái)回復(fù)「電子書(shū)」即可免費(fèi)獲取?27本?精選的前端電子書(shū)！
???“分享、點(diǎn)贊、在看” 支持一波??