首页
所有分类
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新属性
Nov 11 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 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
EventBus(1) Spring-Retry(1) TcpServer(1) 忘记密码(1) ICF-5900W(2) Spring Boot(5) B+树(2) Fragment(1) muduo(1) pt-archiver(1)
You might like
丧钟首部独立剧集《丧钟：骑士与龙》北美正式开播，场面血腥
2020/04/09 欧美动漫
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
php 魔术方法详解
2014/11/11 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
Javascript技术难点之apply，call与this之间的衔接
2015/12/04 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
layui选项卡效果实现代码
2017/05/19 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
基于Require.js使用方法(总结)
2017/10/26 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
用Python实现斐波那契（Fibonacci）函数
2016/03/25 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
团队执行力培训心得体会
2015/08/15 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
python中取整数的几种方法
2021/11/07 Python