通常我們喜歡使用半透明顏色作為背景喻奥。如果將其疊放到照片背層上席纽，就會(huì)增加視覺上的沖擊力，不過這樣會(huì)導(dǎo)致文字閱讀困難撞蚕。
比如润梯，下面這個(gè)效果：
html文件：
<main>
<blockquote>
"少年貪玩，青年迷戀愛情甥厦，壯年汲汲于成名成家纺铭，暮年自安于自欺欺人。人壽幾何刀疙，頑鐵能煉成的精金舶赔，能有多少？但不同程度的鍛煉谦秧，必有不同程度的成績(jī)竟纳；不同程度的縱欲放肆，必積下不同程度的頑劣疚鲤。
<br />
<br />
"上蒼不會(huì)讓所有幸福集中到某個(gè)人身上锥累，得到愛情未必?fù)碛薪疱X；擁有金錢未必得到快樂集歇；得到快樂未必?fù)碛薪】低奥裕粨碛薪】滴幢匾磺卸紩?huì)如愿以償。保持知足常樂的心態(tài)才是淬煉心智诲宇、凈化心靈的最佳途徑际歼。一切快樂的享受都屬于精神，這種快樂把忍受變?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è)偽元素肢簿，然后將其定位在元素的下層，它的背景將無縫匹配到<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;
}
效果如圖：
毛玻璃效果
