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制作立体效果导航菜单
Jan 12 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 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
PHP计算加权平均数的方法
2015/07/16 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jquery JSON的解析方式
2009/07/25 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python JSON编解码方式原理详解
2020/01/20 Python
详解django中Template语言
2020/02/22 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
新农村建设标语
2014/06/24 职场文书
先进教师事迹材料
2014/12/16 职场文书
暑期工社会实践报告
2015/07/13 职场文书
深入浅析React中diff算法
2021/05/19 Javascript