DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> CSS3打造磨砂玻璃背景效果
CSS3打造磨砂玻璃背景效果
編輯：關於CSS     

簡介

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

實現原理也挺簡單的;

效果圖及實現

效果圖

代碼實現

CSS Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3.     <head>   
  4.         <meta charset="UTF-8">   
  5.         <title>Document</title>   
  6.         <style>   
  7.                     /**  
  8.                      * 設置背景圖全屏覆蓋及固定  
  9.                      * 設置內部元素偏移  
  10.                      */  
  11.                     body {   
  12.                         /*此處背景圖自行替換*/  
  13.                         background: url(demo.jpg) no-repeat center center fixed;   
  14.                         background-size: cover;   
  15.                          min-height: 100vh;   
  16.                         box-sizing: border-box;   
  17.                         margin: 0;   
  18.                         padding-top: calc(50vh - 6em);   
  19.                         font: 150%/1.6 Baskerville, Palatino, serif;   
  20.                     }   
  21.   
  22.                     /**  
  23.                      * 整體居中功能；  
  24.                      * 背景透明虛化  
  25.                      * 溢出隱藏  
  26.                      * 邊緣圓角化  
  27.                      * 文字增加淡陰影  
  28.                      */  
  29.                     .description{   
  30.                         position: relative;   
  31.                         margin: 0 auto;   
  32.                         padding: 1em;   
  33.                         max-width: 23em;   
  34.                         background: hsla(0,0%,100%,.25) border-box;   
  35.                         overflow: hidden;   
  36.                         border-radius: .3em;   
  37.                         box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,   
  38.                                     0 .5em 1em rgba(0, 0, 0, 0.6);   
  39.                         text-shadow: 0 1px 1px hsla(0,0%,100%,.3);   
  40.                     }   
  41.   
  42.                     /*使用濾鏡模糊邊緣*/  
  43.                     .description::before{   
  44.                         content: '';   
  45.                         position: absolute;   
  46.                         top: 0; rightright: 0; bottombottom: 0; left: 0;   
  47.                         margin: -30px;   
  48.                         z-index: -1;   
  49.                         -webkit-filter: blur(20px);   
  50.                         filter: blur(20px);   
  51.                     }   
  52.         </style>   
  53.     </head>   
  54.     <body>   
  55.         <p class="description">   
  56.         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod   
  57.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,   
  58.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo   
  59.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse   
  60.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non   
  61.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   
  62.         </p>   
  63.     </body>   
  64. </html>   

總結

這種實現模式是考慮了性能來寫的,以及維護上的考慮
- 比如使用了em,可以很輕松的放大縮小整體大小
- 這裡使用了hsla,這是我第一次使用這個顏色值;以前只在ps調整這個,很不錯的顏色模式.和RGBA大同小異,但是HSLA更符合人類眼睛的觀看;
- 還學到了一種新的背景縮寫方式

CSS Code復制內容到剪貼板
  1. /*分開寫*/  
  2. background-color:#ff0;   
  3. background-image:url(background.gif);   
  4. background-repeat:no-repeat;   
  5. background-attachment:fixed;   
  6. background-position:0 0;   
  7. background-size:cover;   
  8.   
  9. /*簡寫*/  
  10. background: #ff0 url(background.gif) no-repeat / fixed cover;   
  11. /*設置background-size必須用單斜槓隔開*/  

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

關於CSS
淺析word-break work-wrap的區別
word-break:【斷詞】定義：規定自動換行的處理方法.   注：通過word-bre
css控制文字自動換行的實現方法
自動換行問題,正常字符的換行是比較合理的,而連續的數字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹
利用純CSS實現頭像旋轉和發光的效果
效果圖：實例代碼：復制代碼代碼如下:<!DOCTYPE html><html la

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS3常用的幾種顏色漸變模式總結 css關於position屬性的用法詳解(絕對定位和相對定位的混淆) 使用CheckBox的屬性制作純css動態導航欄 常用的 css 命名規則(推薦) 老生常談position定位——讓人又愛又恨的屬性 css控制文字自動換行的實現方法 用CSS控制網頁總體風格 Div CSS實例教程：頁面制作方法 淺談css margin重疊 常用CSS縮寫語法總結
熱門推薦
css實現文字的自動隱藏 利用CSS3實現開門效果實例源碼 CSS+DIV制作頁面圓角效果 css background-attachment屬性進階 css圖片透明效果 CSS布局教程:絕對定位和相對定位 CSS基礎教程:CSS的應用 空心三角形的簡單實現(必看篇) CSS的十八般技巧
大家都在看
網頁設計參考:50個雜志類網站設計實例 9.9 返回大於等於指定數的最小整數ceil()方法 CssGaga教程:皮膚1toN mac下的編輯神器vim配置 聊聊年度最熱門的那些HTML 5案例 JS獲取鼠標坐標的實例方法 Rails的RJS模板十九 等待指定時間後自動跳轉或關閉當前頁面的js代碼
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved