首页
所有分类
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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
详解CSS3：overflow属性
Nov 17 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 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
请假条(31) 责任书(145) 决心书(42) 保证书(97) 建议书(203) 承诺书(369) 倡议书(159) 主持词(345) 广告词(105) 活动总结(790)
You might like
php htmlspecialchars加强版
2010/02/16 PHP
PHP仿博客园 个人博客（1） 数据库与界面设计
2013/07/05 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
让iframe自适应高度（支持XHTML，支持FF）
2007/07/24 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
javascript学习笔记（二）数组和对象部分
2014/09/30 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python实现包含min函数的栈
2016/04/29 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python制作简易注册登录系统
2016/12/15 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
Python json读写方式和字典相互转化
2020/04/18 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
python 识别登录验证码图片功能的实现代码（完整代码）
2020/07/03 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
父亲八十大寿答谢词
2014/01/23 职场文书
探亲邀请信范文
2014/01/30 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang