首页
所有分类
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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
详解css3 Transition属性（平滑过渡菜单栏案例）
Sep 05 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
html5服务器推送_动力节点Java学院整理
Jul 12 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 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
数据保存(1) 分块(1) translation(2) 查找算法(1) 读取(1) 装饰器(1) decorator(1) 网页解析(1) bs4(1) 数组(5)
You might like
php中全局变量global的使用演示代码
2011/05/18 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
php错误日志简单配置方法
2016/07/11 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python编程中的for循环语句学习教程
2015/10/14 Python
python3编码问题汇总
2016/09/06 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Python如何使用函数做字典的值
2019/11/30 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
python 图像增强算法实现详解
2021/01/24 Python
HearthSong官网：儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
瑞士最大的图书贸易公司：Orell Füssli
2019/12/28 全球购物
求职信怎么写范文
2014/05/26 职场文书
未婚证明书模板
2014/10/08 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers