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阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python打印异常信息的两种实现方式
2019/12/24 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
一道Delphi面试题
2016/10/28 面试题
促销活动总结范文
2014/04/30 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
体检通知范文
2015/04/21 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
详解mysql三值逻辑与NULL
2021/05/19 MySQL