亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS毛玻璃效果如何實(shí)現(xiàn)

  發(fā)布時(shí)間：2015-12-21 15:45:48   作者：佚名   我要評(píng)論
毛玻璃其實(shí)就是磨砂玻璃，能夠模糊的看清背后的風(fēng)景，讓人感覺有種朦朧美，讓界面看上去有些層次感，對(duì)毛玻璃感興趣的小伙伴們可以參考一下

毛玻璃讓人感覺有種朦朧美，讓界面看上去有些層次感，下面就為大家分享毛玻璃的設(shè)計(jì)過程。
比如：

高大上啊，接下來肯定是眼饞手癢的過程。。。

當(dāng)然，用ps搞一個(gè)全景毛玻璃背景毫無疑問是最省事的，那接下來就沒啥事可干了。

當(dāng)然no no no了。

毛玻璃無疑就是種模糊了，少不了filter blur。

最終效果（chrome）：

天氣預(yù)報(bào)

嗯，也算是將就了。。。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     </style>  
  6. </head>  
  7. <body>  
  8.     <div class='container'>  
  9.         <div class='frosted-glass'></div>  
  10.         <img class='weather' src='cloudy.png'>  
  11.     </div>  
  12. </body>  
  13. </html>  

先搞一個(gè)div作為容器層，用來放置風(fēng)景背景圖。

內(nèi)部放一個(gè)div，作為毛玻璃的主體。

再放一個(gè)img，顯示天氣圖標(biāo)。

容器層：

大小是圖片大小，把風(fēng)景圖作為背景顯示，no-repeat。這里用到一個(gè)小技巧，將background-attachment設(shè)成fixed，不隨元素滾動(dòng)，讓子元素繼承了本層的背景后，子元素就變成了一個(gè)viewport，移到哪兒就看到背景的哪兒。。。額。。。這句話理解起來有點(diǎn)困難，碼農(nóng)缺乏語言表達(dá)也是一大苦惱。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .container{   
  2.        width: 287px;   
  3.        height: 285px;   
  4.        background-image: url(background.png);   
  5.        background-repeat: no-repeat;   
  6.        background-attachment: fixed;   
  7.        overflow: hidden;   
  8.    }   

毛玻璃層：

這里的關(guān)鍵技巧就是background:inherit，直接使用了父元素的背景，和父級(jí)的background-attachment:fixed可完成從相機(jī)看世界的各種牛逼效果。

本文的的毛玻璃是全景，當(dāng)然可以上半部或者下半部，或者其他位置，這就看出inherit和fixed最牛的地方了。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .frosted-glass{   
  2.         width: 287px;   
  3.         height: 285px;   
  4.         background: inherit;   
  5.         -webkit-filter: blur(5px);   
  6.         -moz-filter: blur(5px);   
  7.         -ms-filter: blur(5px);   
  8.         -o-filter: blur(5px);   
  9.         filter: blur(5px);   
  10.         filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);   
  11.     }   

上面的各種filter為了兼容各種瀏覽器版本，可度娘可谷歌，隨便啦。

ie6~9的就用filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false)進(jìn)行兼容。

ie8下的效果，繼續(xù)將就吧。

最后就是天氣圖標(biāo)：

需要把圖標(biāo)浮在最上層某個(gè)位置上，個(gè)人不太喜歡使用飛在天上的absolute來解決人間的俗世問題，元素內(nèi)的定位用margin來作就足夠了，雖然會(huì)在頁面的回流上有影響，但不會(huì)產(chǎn)生足夠的影響，好處就是父元素的位置和大小的變動(dòng)產(chǎn)生后遺癥會(huì)盡可能小，讓absolute來弄，那就頭大了，人間的問題就讓人間的來解決吧。

圖標(biāo)的position設(shè)成relative，是為了讓它浮在最上面，因?yàn)閞elative的要比默認(rèn)static的顯示層級(jí)高。

定位就用margin來做，當(dāng)然前提是要把它弄成block級(jí)元素，否則就然并卵了。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .weather{   
  2.      width:80px;   
  3.      height:80px;   
  4.      margin-top: -200px;   
  5.      margin-left: 100px;   
  6.      position: relative;   
  7.      display: block;   
  8.  }   

至此完成基本效果。

相關(guān)文章

最新評(píng)論