首页
所有分类
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实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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) BOSE(2) 收信机(3) ICF-2010(1) 春雷3P7(1) 音箱(1) 单管机(1) 探测器(1) 原理(1) 晶体管(2)
You might like
php共享内存段示例分享
2014/01/20 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
javaScript基础详解
2017/01/19 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python抓取框架Scrapy爬虫入门：页面提取
2017/12/01 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
温泉秘密：Onsen Secret
2020/07/06 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
个人自我鉴定
2013/11/07 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
转让协议书
2015/01/27 职场文书
自我推荐信格式模板
2015/03/24 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
java开发双人五子棋游戏
2022/05/06 Java/Android