首页 > 作文

CSS3毛玻璃效果(blur)有白边问题的解决方法

更新时间:2023-04-06 22:33:40 阅读: 评论:0

络绎不绝的络绎是什么意思做一个登录页,全屏背景图毛玻璃效果,实现方法如下:

html:

<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>58年</body>

css:

.login-wrap {  overflow: hidden;}.login-mask {  /* ie6~ie9 */  filter: progid: dximagetransform.microsoft.blur(pixelradius=100, makeshadow=fal);  -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% 15东北立秋吃什么0%;就行了。效果图如下:

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

另外一种就是在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,,效果图如下:

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

太阳花的作文

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

本文发布于:2023-04-06 22:33:39,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/0a2c37f21566f55a3142105508af8533.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS3毛玻璃效果(blur)有白边问题的解决方法.doc

本文 PDF 下载地址:CSS3毛玻璃效果(blur)有白边问题的解决方法.pdf

标签:效果   效果图   很明显   毛玻璃
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图
  • 我要关灯
    我要开灯
  • 返回顶部