CSS毛玻璃实际效果怎样完成

日期:2021-03-04 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

毛玻璃令人觉得有种若隐若现美,让页面看上去一些层级感,下面就为大伙儿共享毛玻璃的设计方案全过程。
例如:

伟岸上啊,接下来毫无疑问是眼馋手痒的全过程。。。

自然,用ps搞1个全景图毛玻璃情况没什么疑惑是最方便的,那接下来就没啥事可干了。

自然no no no了。

毛玻璃无疑便是种模糊不清了,少不上filter blur。

最后实际效果(chrome):

天气气象预报

嗯,也算是凑合了。。。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf⑻">  
  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>  

先搞1个div做为器皿层,用来置放景色情况图。

內部放1个div,做为毛玻璃的行为主体。

再放1个img,显示信息天气标志。

器皿层:

尺寸是照片尺寸,把景色图做为情况显示信息,no-repeat。这里用到1个小窍门,将background-attachment设成fixed,不随元素翻转,让子元素承继了本层的情况后,子元素就变为了1个viewport,移到哪儿就看到情况的哪儿。。。额。。。这句话了解起来有点艰难,码农欠缺語言表述也是1大苦恼。

CSS Code拷贝內容到剪贴板
  1. .container{   
  2.        width287px;   
  3.        height285px;   
  4.        background-imageurl(background.png);   
  5.        background-repeatno-repeat;   
  6.        background-attachmentfixed;   
  7.        overflowhidden;   
  8.    }   

毛玻璃层:

这里的重要技能便是background:inherit,立即应用了父元素的情况,和父级的background-attachment:fixed可进行从照相机看全球的各种各样牛逼实际效果。

本文的的毛玻璃是全景图,自然能够上半部或下半部,或别的部位,这就看出inherit和fixed最牛的地区了。

CSS Code拷贝內容到剪贴板
  1. .frosted-glass{   
  2.         width287px;   
  3.         height285px;   
  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)开展适配。

ie8下的实际效果,再次凑合吧。

最终便是天气标志:

必须把标志浮在最顶层某个部位上,本人不太喜爱应用飞在天空的absolute来处理世间的俗世难题,元素内的精准定位用margin来作就充足了,尽管会在网页页面的回流上有危害,但不容易造成充足的危害,益处便是父元素的部位和尺寸的变化造成并发症会尽量小,让absolute来弄,那就头大了,世间的难题就令人间的来处理吧。

标志的position设成relative,是以便让它浮在最上面,由于relative的要比默认设置static的显示信息等级高。

精准定位就用margin来做,自然前提条件是要把它弄成block级元素,不然就然并卵了。

CSS Code拷贝內容到剪贴板
  1. .weather{   
  2.      width:80px;   
  3.      height:80px;   
  4.      margin-top: -200px;   
  5.      margin-left100px;   
  6.      positionrelative;   
  7.      displayblock;   
  8.  }   

至此进行基础实际效果。