首页
所有分类
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中的calc()功能
Jul 14 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
html5表单的required属性使用
Jul 07 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) 算法(1) 递归(1) Parser(1) 双人对弈(1) SSH(3) Vscode(3) tokenizer(1) 后端(1)
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
IE事件对象（The Internet Explorer Event Object）
2012/06/27 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
2019/04/17 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
ant design实现圈选功能
2019/12/17 Javascript
[00:58]他们到底在电话里听到了什么？
2017/11/21 DOTA
Python数据结构之Array用法实例
2014/10/09 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python中提高pip install速度
2020/02/14 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商： Zooplus
2016/08/01 全球购物
护理专业自荐信范文
2014/02/26 职场文书
付款委托书范本
2014/04/04 职场文书
1亿有多大教学反思
2014/05/01 职场文书
公务员个人年终总结
2015/02/12 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python