您现在的位置是：网站首页> 编程资料编程资料

CSS3毛玻璃效果(blur)有白边问题的解决方法利用CSS3实现毛玻璃效果示例源码使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法CSS毛玻璃效果如何实现css实现照片模糊效果类似毛玻璃效果iframe去边框、无边框使用大全(实践经验整理)CSS3打造磨砂玻璃背景效果一款html5 canvas实现的图片玻璃碎片特效css3 iphone玻璃透明气泡完美实现CSS实现文字高光水波渐变的动态效果实例纯CSS3实现图片无间断轮播效果

2021-09-04 1410人已围观

简介这篇文章主要为大家详细介绍了CSS3毛玻璃效果(blur)有白边问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

做一个登录页，全屏背景图毛玻璃效果，实现方法如下：

HTML：

CSS：

.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添加同样的背景图的话，白边就会消失：

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,，效果图如下：

边缘的白边去掉了，并且看起来不是那么违和了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：CSS边界线消失的问题详解CSS3圆角边框和边界图片效果实例 css控制边界与边框示例(内边距、外边距使用方法)CSS中的边界margin的取值为负值说明掌握盒模型轻松DIV CSS网页布局CSS3简单带下划线跟随下拉菜单特效源码CSS3 渐变（Gradients）之CSS3 线性渐变 CSS3实现的鼠标滑过边框线条动画特效源码纯css3基于svg实现鼠标经过按钮边框线条动画特效源码纯CSS3实现的鼠标经过文字倾斜线性变换动画特效源码

下一篇：用CSS3的box-reflect来制作倒影效果5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)用CSS3的box-reflect设置文字倒影效果的方法讲解CSS3制作文字半透明倒影效果的两种实现方式Css3实现带倒影的3D图片走廊的效果代码利用CSS3把图片变成灰色模式的实例代码CSS3实现圆形图片鼠标悬停图片旋转放大特效源码纯CSS3实现图片无间断轮播效果纯js和CSS3分散式宝丽来图片画廊CSS3鼠标滑过图片标题和遮罩层动画特效源码纯css3实现的鼠标滑过图片左右3d翻转效果源码

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢