首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3打造磨砂玻璃背景效果

Posted in HTML / CSS onSeptember 28, 2016

简介

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

实现原理也挺简单的;

效果图及实现

效果图

CSS3打造磨砂玻璃背景效果

代码实现

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必须用单斜杠隔开*/  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

CSS3打造磨砂玻璃背景效果

- Author -

crper

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 #HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 #HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 #HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 #HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 #HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 #HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 #HTML / CSS
Javascript面试题(44) 软件工程师面试题(40) Servlet面试题(20) MySQL面试题(19) J2EE面试题(19) Ruby面试题(15) PYTHON面试题(27) EJB面试题(46) Delphi面试题(13) UNIX面试题(27)
You might like
跟我学Laravel之请求与输入
2014/10/15 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览（敏捷英雄篇）
2019/05/28 DOTA
pycharm 使用心得（五）断点调试
2014/06/06 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
提供世界各地便宜的机票：Sky-tours
2016/07/21 全球购物
英国最大的在线运动补充剂商店：Discount Supplements
2017/06/03 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商：Awesome Books
2020/02/22 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
销售文员的岗位职责
2013/11/20 职场文书
刑事代理授权委托书
2014/09/17 职场文书
六一儿童节开幕词
2015/01/29 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
用python自动生成日历
2021/04/24 Python