CSS3打造磨砂玻璃背景效果

网络
家乡的夜景，小小的月牙儿挂在湛蓝湛蓝的天空上，把淡淡的光洒在军舰上，军舰就像披上了一件银白色的棉袄，海面上波光粼粼，海浪轻轻地拍打着礁石，像一位母亲在抚摸着孩子的小脚丫。

简介

这个效果是在看CSS Secrets这书上看到的,感觉很不错;

实现原理也挺简单的;

效果图及实现

效果图

代码实现

CSS Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>Document</title>
  6. <style>
  7. /**
  8. *设置背景图全屏覆盖及固定
  9. *设置内部元素偏移
  10. */
  11. body{
  12. /*此处背景图自行替换*/
  13. background:url(demo.jpg)no-repeatcentercenterfixed;
  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.6Baskerville,Palatino,serif;
  20. }
  22. /**
  23. *整体居中功能；
  24. *背景透明虚化
  25. *溢出隐藏
  26. *边缘圆角化
  27. *文字增加淡阴影
  28. */
  29. .description{
  30. position:relative;
  31. margin:0auto;
  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:0001pxhsla(0,0%,100%,.3)inset,
  38. 0.5em1emrgba(0,0,0,0.6);
  39. text-shadow:01px1pxhsla(0,0%,100%,.3);
  40. }
  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. <pclass="description">
  56. Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmod
  57. temporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,
  58. quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodo
  59. consequat.Duisauteiruredolorinreprehenderitinvoluptatevelitesse
  60. cillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnon
  61. proident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.
  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:00;
  7. background-size:cover;
  9. /*简写*/
  10. background:#ff0url(background.gif)no-repeat/fixedcover;
  11. /*设置background-size必须用单斜杠隔开*/

以上就是CSS3打造磨砂玻璃背景效果。心，可以超越困难、突破阻挠；心，可以粉碎障碍；心，最终必会达到你的期望。然而，成功的的障碍，往往又是你的心！是你面对不可能完成的高度时，心为自己设定的瓶颈。更多关于CSS3打造磨砂玻璃背景效果请关注haodaima.com其它相关文章！