CSS3毛玻璃效果(blur)有白边问题的解决方法
发布时间:2016-11-15 14:03:36 作者:夏如眷 我要评论
这篇文章主要为大家详细介绍了CSS3毛玻璃效果(blur)有白边问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
做一个登录页,全屏背景图毛玻璃效果,实现方法如下:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | < body > < div class = "login-wrap" > < div class = "login-mask" ></ div > < div class = "login-box" ></ div > </ div > < script > var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; $('.login-mask').css("height", h); $('.login-mask').css("width", w); </ script > </ body > |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .login-wrap { overflow : hidden ; } .login-mask { /* IE6~IE9 */ filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius= 100 , MakeShadow=false); -webkit-filter: blur( 100px ); -moz-filter: blur( 100px ); -ms-filter: blur( 100px ); filter: blur( 100px ); background-image : url (../../../img/background/home-bg -3 .jpg); background-repeat : no-repeat ; background- size : cover; background-attachment : fixed ; background-position : center ; position : absolute ; z-index : 1 ; } .login-box { width : 300px ; height : 400px ; background-color : rgba( 255 , 255 , 255 , 0.5 ); display : block ; border : 1px solid rgba( 183 , 183 , 183 , 0.47 ); border-radius: 6px ; position : absolute ; left : 50% ; margin-right : auto ; margin-left : -150px ; margin-top : 10% ; z-index : 2 ; } |
效果如下:
可以发现边上是有白边的,这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。效果图如下:
仔细看可以发现白边不那么明显了。
另外一种就是在blur的值比较小的情况下,比如将上述的blur值改成20,效果如下:
可以看出白边很明显,这时候如果给body添加同样的背景图的话,白边就会消失:
1 2 3 4 5 6 7 | body{ background-image: url(../../../img/background/home-bg-3.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center; } |
效果图如下:
可以看到边缘的区别很明显。但是对比有点明显,效果并不好,将blur的值再改小一点,改成5,,效果图如下:
边缘的白边去掉了,并且看起来不是那么违和了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 相信大家都知道毛玻璃效果做的好的话,能使页面显得非常生动立体,整体效果非常好,下面我们就来学习下如何利用CSS3实现毛玻璃效果。2016-09-25
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
CSS3的blur属性可以将图片加上模糊滤镜的效果,下面我们就来详细看一下使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法,需要的朋友可以参考下2016-07-08- 毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感,对毛玻璃感兴趣的小伙伴们可以参考一下2015-12-21
- 这篇文章主要介绍了css实现照片模糊效果类似毛玻璃效果,需要的朋友可以参考下2014-04-08
- iframe去边框、无边框在实际应用中时比较常见的,本文整理了一些几条iframe的使用技巧,喜欢的朋友可以参考下2013-11-18
- 这篇文章主要为大家详细介绍了CSS3如何打造磨砂玻璃背景效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-09-28
- html5 canvas实现图片玻璃碎片特效,图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息,效果很不错,喜欢的朋友可以参考下2014-09-11
- 玻璃透明气泡而且还是类似iphone风格的,听起来还不错吧,貌似css3的出现让一切看似不可能的事情变成了可能,接下来为大家介绍下css3实现玻璃透明气泡的写法,感兴趣的朋友2024-04-23
- 这篇文章介绍的是用CSS实现文字高光水波渐变的效果,实现后效果很漂亮,对大家日常开发很有用处,下面小编整理好分享给大家。有需要的可以参考。2016-08-29
- 图片轮播效果在各大网站都能用到,本文给大家分享通过纯css3制作轮播效果图的思路,感兴趣的朋友一起看看吧2016-08-25
最新评论