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 Media Queries详细介绍和使用实例
May 08 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 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 STRING 陷阱原理说明
2010/07/24 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
详解vue 组件之间使用eventbus传值
2017/10/25 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python中反射用法实例
2015/03/27 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python绘制直线的方法
2018/06/30 Python
python实现飞机大战
2018/09/11 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python版百度语音识别功能
2019/07/09 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
《长城》教学反思
2014/02/14 职场文书
励志演讲稿范文
2014/04/29 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
中标通知书
2015/04/17 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python