首页
所有分类
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 相关文章推荐
CSS中一些@规则的用法小结
Mar 09 HTML / CSS
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
HTML5进阶段内联标签汇总（小篇）
Jul 13 HTML / CSS
详解html5 canvas 微信海报分享（个人爬坑）
Jan 12 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 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) 五子棋(12) 井字棋(1) format(1) 模型保存加载(1) 计算器(5) 人工智能(2) 对齐打印(1) PyTorch(1) 底部导航(1)
You might like
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
二级域名转向类
2006/11/09 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
javascript实现粘贴qq截图功能（clipboardData）
2016/05/29 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
环形加载进度条封装（Vue插件版和原生js版）
2019/12/04 Javascript
Vue实现简易计算器
2020/02/25 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
详解Python的数据库操作（pymysql）
2019/04/04 Python
python画图常规设置方式
2020/03/05 Python
python中for in的用法详解
2020/04/17 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
威尔逊皮革：Wilsons Leather
2018/12/07 全球购物
Ooni英国官网：披萨烤箱
2020/05/31 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
秋季婚礼证婚词
2014/01/11 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
股东授权委托书范文
2014/09/13 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书