首页
所有分类
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中各种颜色属性的使用教程
May 17 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5 input元素类型：email及url介绍
Aug 13 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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) 绿林侠盗(1) 模拟人生(1) 大话西游(1) AGC(1) 吸血鬼(1) FS1016(1)
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
PDO::exec讲解
2019/01/28 PHP
JavaScript 原型继承
2011/12/26 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
python中MySQLdb模块用法实例
2014/11/10 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python实现低通滤波器代码
2020/02/26 Python
英国在线药房：Express Chemist
2019/03/28 全球购物
美国Jeep配件购物网站：Morris 4×4 Center
2019/05/01 全球购物
澳洲网红粉泥面膜：Sand & Sky
2019/08/13 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
2019已经过半，你知道年中工作总结该怎么写吗？
2019/07/03 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js