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属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
深入探究HTML5的History API
Jul 09 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
jQuery+pjax简单示例汇总
2017/04/21 jQuery
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python3.4实现邮件发送功能
2018/05/28 Python
python numpy元素的区间查找方法
2018/11/14 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
Why we need EJB
2016/10/20 面试题
小区推广策划方案
2014/06/06 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android