首页
所有分类
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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
HTML5学习笔记之html5与传统html区别
Jan 06 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
详解如何通过H5（浏览器/WebView/其他）唤起本地app
Dec 11 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 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) 九宫格(5) 内存池(1) queue(1) RecyclerView(1) 云服务器(1) TaiShan(1) Simhash(1) JDK(1) Hadoop(1)
You might like
php面向对象全攻略 （三）特殊的引用“$this”的使用
2009/09/30 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
分分钟学会vue中vuex的应用（入门教程）
2017/09/14 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Python heapq使用详解及实例代码
2017/01/25 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
香港网上花店：FlowerAdvisor香港
2019/05/30 全球购物
泰国时尚电商：POMELO Fashion
2020/03/11 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
自我鉴定写作要点
2014/01/17 职场文书
工程售后服务承诺书
2014/05/21 职场文书
运动会拉拉队口号
2014/06/09 职场文书
525心理活动总结
2014/07/04 职场文书
店铺转让协议书（2014版）
2014/09/23 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
体育个人工作总结
2015/02/09 职场文书
行政申诉状范文
2015/05/20 职场文书
费城故事观后感
2015/06/10 职场文书
关于环保的宣传稿
2015/07/23 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书