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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3 box-sizing属性
Apr 17 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 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
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python监控文件或目录变化
2016/06/07 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
优秀学生获奖感言
2014/02/15 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书