CSS3打造磨砂玻璃背景效果

2024-07-11 08:32:28

字體：大中小

來源：轉載

供稿：網友

簡介

這個效果是在看CSS Secrets這書上看到的,感覺很不錯;

實現原理也挺簡單的;

效果圖及實現

效果圖

代碼實現

CSS Code復制內容到剪貼板

<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8">
<title>Document</title> <style>
/** * 設置背景圖全屏覆蓋及固定
* 設置內部元素偏移 */
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);
} </style>
</head> <body>
<p class="description"> 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. </p>
</body> </html>