解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下:
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;
}
效果如下:
可以发现边上是有白边的,这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。效果图如下:
仔细看可以发现白边不那么明显了。
另外一种就是在blur的值比较小的情况下,比如将上述的blur值改成20,效果如下:
可以看出白边很明显,这时候如果给body添加同样的背景图的话,白边就会消失:
body{
background-image: url(../../../img/background/home-bg-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
效果图如下:
可以看到边缘的区别很明显。但是对比有点明显,效果并不好,将blur的值再改小一点,改成5,,效果图如下:
边缘的白边去掉了,并且看起来不是那么违和了。
如果你觉得按照第一个方法做出来的效果背景太亮的话,可以使用滤镜来变暗一点:
background-color: rgba(141, 141, 141, 0.35);
background-blend-mode: darken;
效果如下:
解决css3毛玻璃效果(blur)有白边问题的更多相关文章
- css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
- CSS3 之filter毛玻璃效果弹窗
先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- CSS3中毛玻璃效果的使用方法
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...
- 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- CSS 奇思妙想 | 全兼容的毛玻璃效果
通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...
- 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
随机推荐
- TYVJ1035 棋盘覆盖
时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 给出一张n*n(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少1*2的多米诺骨牌进行掩 ...
- datagrid
<!DOCTYPE html><html><head> <style>body { font-family: Helvetica Neue, Aria ...
- Généralement c'est un mélange qui me devient personnellement
Parmi mes plus grands problèmes personnels avec maisons de rue conventionnelles est en fait ils sont ...
- 博文Contents<201--到000—>
====================================--------------------------------- 前言:博客中的随笔文章.并非都是笔者的原创文章.有些是听别人 ...
- Html中自定义鼠标的形状
Html中自定义鼠标的形状 <html> <head> <title>自定义的鼠标形状</title> <meta http-equiv=&quo ...
- getElementsByClassName简单实现
function getElementsByClassName(node, className) { var aClassReg = className.split(' ').map(function ...
- rootkit后门检查工具RKHunter
---恢复内容开始--- rkhunter简介: 中文名叫"Rootkit猎手", rkhunter是Linux系统平台下的一款开源入侵检测工具,具有非常全面的扫描范围,除了能够检 ...
- 关于MySQL存储过程中遇到的一个错误
执行结果: 查询:)) comment '操作变量' begin set var='MySQL%Orcle%DeLL%IBM'; select replace(var,'%'... 共 行受到影响 执 ...
- AJAX请求时status返回状态明细表 readyState的五种状态
在<Pragmatic Ajax A Web 2.0 Primer >中偶然看到对readyStae状态的介绍,感觉这个介绍很实在,摘译如下: 0: (Uninitialized) the ...
- socket (一)
socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...