效果
毛玻璃效果圖
實(shí)現(xiàn)代碼
css主要部分:
* {
padding: 0;
margin: 0;
color: #333;
}
body
, #box::before {
background-image: url(img/1.jpg);
background-size: cover;
background-attachment: fixed;
background-position: top center;
}
#box::before
, .center {
margin: auto;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
#box {
width: 550px;
height: 350px;
border-radius: 10px;
padding: 10px;
box-shadow: -4px 0 4px #0003
, 0 -4px 4px #0003
, 4px 0 4px #0003
, 0 4px 4px #0003;
background: #FFF4;
left: auto;
right: 15%;
}
#box::before {
content: '';
display: block;
z-index: -1;
width: 100%;
height: 100%;
filter: blur(3px);
}
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="box" class="center">
<p style="font-size: 1.5rem;">毛玻璃表面不平整贡羔，光線通過毛玻璃被反射后向四面八方射出去
(因?yàn)槊ＡП砻娌皇枪饣钠矫妫构猱a(chǎn)生了漫反射)废菱，折射到視網(wǎng)膜上已經(jīng)是不完整的像，
于是就看不見玻璃背后的東西了。 當(dāng)毛玻璃上貼了透明膠布，毛玻璃的表面又變得平整了饵蒂，
光線可以完整被反射，所以酱讶，在視網(wǎng)膜上又呈現(xiàn)出完整的像退盯，因而，眼睛又能看到物體了泻肯。另外渊迁，
用濕布擦毛玻璃也能看清楚。</p>
</div>
</body>
</html>
實(shí)現(xiàn)思路
通過背景+模糊背景+透明底色實(shí)現(xiàn)毛玻璃的效果灶挟，主要用到了以下屬性
background-size: cover; /* 讓圖片覆蓋整個(gè)背景區(qū)域 */
background-attachment: fixed;
filter: blur(3px); /* 對背景進(jìn)行模糊 */
z-index: -1; /* 讓模糊層在父元素的最底層顯示 */
