CSS3打造磨砂玻璃背景效果
发布时间:2016-09-28 15:54:17 作者:crper 我要评论
这篇文章主要为大家详细介绍了CSS3如何打造磨砂玻璃背景效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
简介
这个效果是在看CSS Secrets这书上看到的,感觉很不错;
实现原理也挺简单的;
效果图及实现
效果图
代码实现
CSS Code复制内容到剪贴板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- /**
- * 设置背景图全屏覆盖及固定
- * 设置内部元素偏移
- */
- body {
- /*此处背景图自行替换*/
- background: url(demo.jpg) no-repeat center center fixed;
- background-size: cover;
- min-height: 100vh;
- box-sizing: border-box;
- margin: 0;
- padding-top: calc(50vh - 6em);
- font: 150%/1.6 Baskerville, Palatino, serif;
- }
- /**
- * 整体居中功能;
- * 背景透明虚化
- * 溢出隐藏
- * 边缘圆角化
- * 文字增加淡阴影
- */
- .description{
- position: relative;
- margin: 0 auto;
- padding: 1em;
- max-width: 23em;
- background: hsla(0,0%,100%,.25) border-box;
- overflow: hidden;
- border-radius: .3em;
- box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
- 0 .5em 1em rgba(0, 0, 0, 0.6);
- text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
- }
- /*使用滤镜模糊边缘*/
- .description::before{
- content: '';
- position: absolute;
- top: 0; rightright: 0; bottombottom: 0; left: 0;
- margin: -30px;
- z-index: -1;
- -webkit-filter: blur(20px);
- filter: blur(20px);
- }
- </style>
- </head>
- <body>
- <p class="description">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
- proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- </p>
- </body>
- </html>
总结
这种实现模式是考虑了性能来写的,以及维护上的考虑
- 比如使用了em,可以很轻松的放大缩小整体大小
- 这里使用了hsla,这是我第一次使用这个颜色值;以前只在ps调整这个,很不错的颜色模式.和RGBA大同小异,但是HSLA更符合人类眼睛的观看;
- 还学到了一种新的背景缩写方式
CSS Code复制内容到剪贴板
- /*分开写*/
- background-color:#ff0;
- background-image:url(background.gif);
- background-repeat:no-repeat;
- background-attachment:fixed;
- background-position:0 0;
- background-size:cover;
- /*简写*/
- background: #ff0 url(background.gif) no-repeat / fixed cover;
- /*设置background-size必须用单斜杠隔开*/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
- 相信大家都知道毛玻璃效果做的好的话,能使页面显得非常生动立体,整体效果非常好,下面我们就来学习下如何利用CSS3实现毛玻璃效果。2016-09-25
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
CSS3的blur属性可以将图片加上模糊滤镜的效果,下面我们就来详细看一下使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,需要的朋友可以参考下2016-07-08- 毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感,对毛玻璃感兴趣的小伙伴们可以参考一下2015-12-21
- html5 canvas实现图片玻璃碎片特效,图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息,效果很不错,喜欢的朋友可以参考下2014-09-11
- 这篇文章主要介绍了css实现照片模糊效果类似毛玻璃效果,需要的朋友可以参考下2014-04-08
- 玻璃透明气泡而且还是类似iphone风格的,听起来还不错吧,貌似css3的出现让一切看似不可能的事情变成了可能,接下来为大家介绍下css3实现玻璃透明气泡的写法,感兴趣的朋友2024-04-23
- 本文给大家介绍基于css3实现的图片模糊过滤效果,当鼠标放上后其它图片模糊,鼠标所在位置的图片清晰,很好的分辨出当前的图片,对css3代码实现模糊过滤效果感兴趣的朋友一2015-11-19
- 这篇文章主要介绍了手机网页web app 图片为何不清晰非常之模糊的原因及解决方法,有此需求的朋友可以参考下2014-06-26
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,这样的线条显然不是我们想要的。这篇文章的目的就是弄清楚里面的原理,以及解决它,感兴趣的朋友可2013-01-09- 这篇文章主要为大家详细介绍了如何灵活运用CSS3特性绘制简易版围棋效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-09-28
最新评论