CSS3毛玻璃


2018年9月21日 暂无评论 阅读 56 次

主要是给背景用filter:blur属性(要加上浏览器内核以兼容各种浏览器),背景虚化后,再对不用虚化的内容比如图片和文字,让他们定位到相应的位置。

  1. .container{
  2. width:650px;
  3. height: 400px;
  4. background: url(./images/background.jpg) fixed no-repeat;
  5. position: relative;
  6. }
  7. .pic{
  8. width:650px;
  9. height: 400px;
  10. background: inherit;
  11. -webkit-filter:blur(5px);
  12. -moz-filter:blur(5px);
  13. -o-filter:blur(5px);
  14. filter:blur(5px);
  15. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
  16. }
  17. .weather{
  18. width:80px;
  19. height: 80px;
  20. display: block;
  21. position: absolute;
  22. top:30%;
  23. left:40%;
  24. }
  25. .text{
  26. display: block;
  27. position: absolute;
  28. top:30%;
  29. left:40%;
  30. color:white;
  31. font-size: 25px;
  32. }

 

  1. <div class=“container”>
  2. <div class=“pic”></div>
  3. <img src=“./images/a.jpg” alt=“” class=“weather”>
  4. <span class=“text”>北京 晴 3-5C</span>
  5. </div>

 

有的时候会看到这个filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=6,   MakeShadow=false);   /*  IE6~IE9  */。这是代表要支持IE6~IE9。

滤镜说明:
Alpha:设置透明层次
blur:创建高速度移动效果,即模糊效果
Chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样

说点什么

avatar
  Subscribe  
提醒