通常我們喜歡使用半透明顏色作為背景。如果將其疊放到照片背層上，就會(huì)增加視覺上的沖擊力，不過(guò)這樣會(huì)導(dǎo)致文字閱讀困難。
比如，下面這個(gè)效果：
html文件：
<main>
<blockquote>
"少年貪玩，青年迷戀愛情，壯年汲汲于成名成家，暮年自安于自欺欺人。人壽幾何，頑鐵能煉成的精金，能有多少？但不同程度的鍛煉，必有不同程度的成績(jī)；不同程度的縱欲放肆，必積下不同程度的頑劣。
<br />
<br />
"上蒼不會(huì)讓所有幸福集中到某個(gè)人身上，得到愛情未必?fù)碛薪疱X；擁有金錢未必得到快樂(lè)；得到快樂(lè)未必?fù)碛薪】?；擁有健康未必一切都?huì)如愿以償。保持知足常樂(lè)的心態(tài)才是淬煉心智、凈化心靈的最佳途徑。一切快樂(lè)的享受都屬于精神，這種快樂(lè)把忍受變?yōu)橄硎埽蔷駥?duì)于物質(zhì)的勝利，這便是人生哲學(xué)。"
<footer>——
<cite>楊絳</cite>
</footer>
</blockquote>
</main>
css文件：
body{
background: url("imgs/animals.jpg") 0 / cover fixed;
}
main{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 800px;
height: 500px;
line-height: 2;
margin: auto;
border-radius: 5px;
background: rgba(255, 255, 255, .3);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
}
輸出的效果：
透明背景效果
我們可以看到文字的閱讀顯然變得很困難，如果想要改善，可以提高背景色的不透明度，如下：
不透明度改為70%
文字的閱讀性提高了，但是失去了想要達(dá)到的設(shè)計(jì)美感。如果我們想要二者兼得，可以借助濾鏡達(dá)到這樣的效果。
由于我們不能直接對(duì)元素本身進(jìn)行模糊處理，所以就先給該元素添加一個(gè)偽元素，然后將其定位在元素的下層，它的背景將無(wú)縫匹配到<body>元素的背景。
完整代碼如下：
css文件
body, main::before{
background: url("imgs/animals.jpg") 0 / cover fixed;
}
main{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 800px;
height: 500px;
line-height: 2;
margin: auto;
border-radius: 5px;
background: rgba(255, 255, 255, .3);
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
overflow: hidden;
}
main::before{
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
效果如圖：
毛玻璃效果
