首页
所有分类
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中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
前端canvas动画如何转成mp4视频的方法
Jun 17 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
Aug 19 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
什么是clearfix (一文搞清楚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
人造肉(1) 天问一号(1) 酶(1) NASA(1) 火星(2) 国际空间站(1) 塑料(1) 毅力号(1) 夸克(1) 太空(1)
You might like
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
微信支付开发教程（一）微信支付URL配置
2014/05/28 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
php实现购物车产品删除功能（2）
2020/07/23 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python实现的矩阵类实例
2017/08/22 Python
对python多线程与global变量详解
2018/11/09 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
Web前端绘制0.5像素的几种方法
2017/08/11 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
eBay瑞士购物网站：eBay.ch
2018/12/24 全球购物
大学四年个人的自我评价
2014/02/26 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
社区灵活就业证明
2014/11/03 职场文书
会计工作能力自我评价
2015/03/05 职场文书
高中开学感言
2015/08/01 职场文书
教师病假条范文
2015/08/17 职场文书