首页
所有分类
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 相关文章推荐
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
Nov 05 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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
ICF-5900W(2) EventBus(1) Spring-Retry(1) OpenLayer(1) Sqlite(2) 多线程(6) IDEA(2) 多维数组(1) Fragment(1) Spring Boot(5)
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
PHP中，文件上传
2006/12/06 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
jquery 选择器部分整理
2009/10/28 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
JavaScript高级程序设计 阅读笔记（十三） js定义类或对象
2012/08/14 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python多线程编程（七）：使用Condition实现复杂同步
2015/04/05 Python
python字典get()方法用法分析
2015/04/17 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
python列表的常用操作方法小结
2016/05/21 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python flask框架实现重定向功能示例
2019/07/02 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python global和nonlocal用法解析
2020/02/03 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
欧洲最大的拼图游戏商店：JigsawPuzzle.co.uk
2018/07/04 全球购物
美国一站式电动和手动工具商店：International Tool
2020/11/26 全球购物
致裁判员加油稿
2014/02/08 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
离婚案件答辩状
2015/05/22 职场文书
如何用python反转图片,视频
2021/04/24 Python