css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题
如何解决CSS3毛玻璃效果blur有白边的问题
发布时间:2021-06-29 11:59:54
来源:亿速云
阅读:81
作者:小新
这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白边的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
做一个登录页,全屏背景图毛玻璃效果,实现方法如下:
HTML:
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);
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,,效果图如下:
边缘的白边去掉了,并且看起来不是那么违和了。
感谢各位的阅读!关于“如何解决CSS3毛玻璃效果blur有白边的问题”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题相关推荐
- css filter blur 白边,解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
- css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
- css毛玻璃效果白边_CSS3毛玻璃效果(blur)有白边问题的解决方法
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
- 解决css3动画效果在360兼容模式跟猎豹浏览器下不兼容
360跟猎豹采用的都是谷歌(WebKit内核)跟IE(Trident内核)的双内核,360浏览器分为极速模式(WebKit内核)和兼容模式(Trident内核),这就导致兼容模式下不支持css3动画效 ...
- 20.毛玻璃效果blur
效果图 DOM <main><blockquote>"Before downloading, be sure to have a code editor (we re ...
- css毛玻璃效果白边_css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
- css毛玻璃效果白边_css3毛玻璃效果白边问题_html/css_WEB-ITnose
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
- 【css技巧】CSS filter的神奇用法 | 褪色|融合效果等
前言 css3的filter可以修改图片的可视效果,用的好堪比美图秀秀,做出来的网页非常炫酷,装上一个大比! 但是也不能滥用,毕竟兼容性摆在那里,用多了还可能卡. 你们看看,一张图加了filter效果 ...
- css实现图片毛玻璃效果
先上效果图 css代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
最新文章
- 腾讯云推出竞价实例 云服务器开销最高下降90%
- mysql源码自适应哈希索引_MySQL 自适应哈希索引
- 暴露的全局方法_期末考试快到了,这4种错误的考试复习方法,越复习越差劲!...
- html中加粗的字体如何改细,css怎么把字体变细?
- Hive 中的Mapper Reducer个数 决定因素
- win 7 电脑错误676、734、678、651等解决办法
- typedef 的使用
- 使用php函数防止SQL注入方法
- linux 编译,链接和加载
- idea运行项目提示找不到或无法加载主类
- Ubuntu下安装python3
- 打算开源一个低代码平台,包含【工作流,业务流,财务,APQC】。技术站 React,typescript,java,mysql
- w ndoWs8pE模式下载,电脑店超级U盘启动盘制作工具V6.8(全能版)
- gartner 服务器虚拟化 市场份额 2013,Gartner:VMware成虚拟化魔力象限领导者
- sprint 周期总结
- 学前端进度慢怎么办?前端学不懂怎么办?
- linux中安装openoffice
- .Dragon4444勒索病毒处理成功方法
- layim的websocket消息撤回功能实现
- scilab安装EMD工具箱