大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何解决CSS3毛玻璃效果blur有白边的问题

这篇文章给大家分享的是有关如何解决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;
}

效果如下:

如何解决CSS3毛玻璃效果blur有白边的问题

可以发现边上是有白边的,这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。效果图如下:

如何解决CSS3毛玻璃效果blur有白边的问题

仔细看可以发现白边不那么明显了。

另外一种就是在blur的值比较小的情况下,比如将上述的blur值改成20,效果如下:

如何解决CSS3毛玻璃效果blur有白边的问题

可以看出白边很明显,这时候如果给body添加同样的背景图的话,白边就会消失:

body{
  background-image: url(../../../img/background/home-bg-3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

 效果图如下:

如何解决CSS3毛玻璃效果blur有白边的问题

可以看到边缘的区别很明显。但是对比有点明显,效果并不好,将blur的值再改小一点,改成5,,效果图如下:

如何解决CSS3毛玻璃效果blur有白边的问题

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

感谢各位的阅读!关于“如何解决CSS3毛玻璃效果blur有白边的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


分享文章:如何解决CSS3毛玻璃效果blur有白边的问题
文章源于:http://dzwzjz.com/article/jshhhs.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP