首页
所有分类
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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
CSS link与@import的区别和用法解析
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
tabBar(1) uniapp(4) Apache(17) feDisplacementMap(1) self(1) Hudi(1) 数据重复(1) Flutter(2) element-china-area-data(1) Navigator(1)
You might like
PHP 字符串分割和比较
2009/10/06 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
PHP 以POST方式提交XML、获取XML，解析XML详解及实例
2016/10/26 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python下Fabric的简单部署方法
2015/07/14 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python超时重新请求解决方案
2019/10/21 Python
pygame实现俄罗斯方块游戏（基础篇3）
2019/10/29 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
既然说Ruby中一切都是对象，那么Ruby中类也是对象吗
2013/01/26 面试题
红领巾广播站广播稿（3篇）
2014/09/20 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
诚信教育主题班会
2015/08/13 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
基于Python实现股票收益率分析
2022/04/02 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL