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


Posted in HTML / CSS onNovember 15, 2016

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

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>

</body>

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)有白边问题的解决方法

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 #HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 #HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 #HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 #HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 #HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 #HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 #HTML / CSS
You might like
用mysql内存表来代替php session的类
2009/02/01 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
深入理解python中的select模块
2017/04/23 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python多进程实现文件下载传输功能
2018/07/28 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
详解Python中的测试工具
2019/06/09 Python
python如何统计代码运行的时长
2019/07/24 Python
python将数据插入数据库的代码分享
2020/08/16 Python
广告学专业毕业生自荐信
2013/09/24 职场文书
求职自荐信的格式
2014/04/07 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
大学专科求职信
2014/07/02 职场文书
岗位职责范本大全
2015/02/26 职场文书
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang