簡介
這個效果是在看CSS Secrets這書上看到的,感覺很不錯;
實作原理也挺簡單的;
效果圖及實作
效果圖
代碼實作
Document
body {
background: url(demo.jpg) no-repeat center center fixed;
background-size: cover;
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 Baskerville, Palatino, serif;
}
.description{
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 23em;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}
.description::before{
content: '';
position: absolute;
top: 0; rightright: 0; bottombottom: 0; left: 0;
margin: -30px;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
總結
這種實作模式是考慮了性能來寫的,以及維護上的考慮
- 比如使用了em,可以很輕松的放大縮小整體大小
- 這裡使用了hsla,這是我第一次使用這個顔色值;以前隻在ps調整這個,很不錯的顔色模式.和RGBA大同小異,但是HSLA更符合人類眼睛的觀看;
- 還學到了一種新的背景縮寫方式
background-color:#ff0;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
background-size:cover;
background: #ff0 url(background.gif) no-repeat / fixed cover;
以上就是CSS3打造磨砂玻璃背景效果的内容，更多相關内容請關注PHP中文網(www.php.cn)！
本文原創釋出php中文網，轉載請注明出處，感謝您的尊重！