当前位置:首页 > 日记 > 正文

CSS3的毛玻璃效果(模糊)已解决白边问题

CSS3的毛玻璃效果(模糊)已解决白边问题
做一个登录页面,全屏背景图的毛玻璃效果,以下是以下几点:

HTML:
U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000 U3000 U3000
U3000 U3000

U3000 U3000
无功W = window.innerwidth document.documentelement.clientwidth document.body.clientwidth | | | |;
var H = window.innerheight document.documentelement.clientheight document.body.clientheight | | | |;

$(登录掩码)Css()

$(登录掩码)Css()
U3000 U3000

CSS:

{登录包装
溢出:隐藏;
}

{登录掩码
IE6 ~ IE9 / * * /
过滤器:ProgID:DXImageTransform.Microsoft.Blur(pixelradius = 100,makeshadow = false);
WebKit的滤波器:模糊(100);
-moz滤波器:模糊(100);
MS:模糊滤波器(100);
滤波器:模糊(100);
背景图像:URL(。 / / / IMG .. .. /背景/ home-bg-3 .webp);
后台重复:不重复;
背景尺寸:封面;
背景附件:固定;
背景位置:中心;
位置:绝对;
Z指数:1;
}

{登录框
宽度:300px;
身高:400px;
背景颜色:RGBA(255, 255, 255,0.5);
显示块;
border: 1px solid RGBA(183, 183, 183,0.47);
边界半径:6px;
位置:绝对;
左:50%;
保证金:汽车;
margin-left: - 150px;
边距顶部:10%;
Z指数:2;
}
结果如下:
可以发现边缘有一个白色的边缘,这是一个很大的模糊值,此时的解决方案是改变背景大小:直接覆盖到背景大小:150% 150%,这样就可以了:
仔细看,你会发现白边不那么明显。

另一种是在模糊值较小时将模糊值更改为20,效果如下:
可以看出,白色边缘是显而易见的,当相同的背景地图添加到身体,白色的一面会消失。

体{
背景图像:URL(。 / / / IMG .. .. /背景/ home-bg-3 .webp);
后台重复:不重复;
背景尺寸:封面;
背景附件:固定;
背景位置:中心;
}

结果如下:
可以看出,边缘的区别是明显的,但对比度有点明显,效果不好,模糊值会变小,变为5,效果图如下:
白边去掉,和看起来不是那么的违和。

以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

相关文章

WPS演示了如何设置一个字体WPS来演

WPS演示了如何设置一个字体WPS来演

字体,教程,演示,如何设置,电脑软件,许多办公室工作人员将使用WPS制作幻灯片。有时需要设置太多的字体。如果你想设置太多的字体,这里是如何批量设置字体。这里是一个小的编辑WPS演示,它批量建立字体方法,供你参考。 WPS演示了批量设置字体的…

Xthunder呼吁对迅雷绿色版参数

Xthunder呼吁对迅雷绿色版参数

迅雷,参数,绿色版,电脑软件,Xthunder,问:我的Firefox浏览器调用对应的下载软件,通过xthunder的延伸,但是我用迅雷绿色版,不能确定,所以我必须定制。如何设置相关参数 答:首先,打开xthunder扩展配置窗口,在点击;下载工具的标签,然后单击Next 建立一个…

AI是怎样画放大镜的

AI是怎样画放大镜的

的是,是怎样,电脑软件,AI,AI如何使用矩形工具来画放大镜AI有很多工具。如何使用矩形工具现在让我们看一下使用矩形工具绘制放大镜的教程。 软件名称:Adobe Illustrator CC(AI)2016破解版64位简体中文版软件大小:1.67gb更新时间:2016-04-11 1。…

mysql超长自动截断的详细解决方案

mysql超长自动截断的详细解决方案

解决方案,详细,电脑软件,mysql,mysql超长自动截断的详细解决方案 同伴问了一个问题:为什么能长字不能自动截断而打电话或在项目更新语句,它可以自动在Navicat切断 如下 创建表(` p_app_station ` ` wx_app_id ` varchar(20)不为空, ` app_secre…

微信聊天保存在哪里它在哪个文件夹

微信聊天保存在哪里它在哪个文件夹

聊天,路径,它在,电脑软件,微信聊天图片存储在哪里该文件夹会告诉你保存微信聊天图片的方式吗如果你收到照片,这幅画放在哪里让我们通过以下方式了解它。 在微信的安装文件夹下的图片文件,如果是默认的路径,你想自己找到它。步骤:打开微信,登录微…

打开IE浏览器弹出错误的浏览器并自

打开IE浏览器弹出错误的浏览器并自

浏览器,错误,图形,弹出,自动关闭,问题: 百度浏览器总是被使用,现在有一个必须用IE浏览器完成的工作。但是,当你打开IE浏览器时,你突然弹出错误的提示(如下图所示),指出并确认按钮后,浏览器窗口自动关闭并退出,并且不能正常使用。 运行时错误! 程序:C…

PS图象处理软件切割技巧总结

PS图象处理软件切割技巧总结

图象,处理软件,技巧,电脑软件,PS,下面是一个非常简单的图片示例。 刻度与对准: 1。秤,这是尺子,功能不是说。 把菜单放在视图中,然后在标尺前面碰到钩子,好吗。 2。对齐,这也是一个很好的选择,例如,当使用框选择工具或拉动参考线,它会自动对齐时,它…

QQ群是如何组建收费QQ群加入收费以

QQ群是如何组建收费QQ群加入收费以

技能,电脑软件,QQ,现在很多明星球迷俱乐部或一些活动和娱乐组织,为了防止别人加入混乱,将创建一个QQ群,设立费用,缴纳会员费进入。接下来是一组QQ群收费方法,供大家参考。 QQ群收费方法 开工资小组。 输入组信息接口。选择管理组。 进入管理组…

一对mysql5.7.14减压版安装图解教

一对mysql5.7.14减压版安装图解教

教程,安装图解,电脑软件,MySQL(社区服务)的社区版和企业版(企业),它们之间的区别是:社区版是免费下载,免费的,但官方没有提供给普通用户的技术支持;企业版是免费的,不是网上下载的,它提供了更多的功能和更全面的技术支持。 有两种方法来安装MySQL,一个…

linux下安装U盘的过程

linux下安装U盘的过程

安装,过程,电脑软件,linux,1:确保内核支持U。 默认情况下可以选择SCSI。 选项:USB必须是USB海量存储支持 :如下: 代码: SCSI支持 ——SCSI支持类型(磁盘、磁带、CD-ROM) SCSI磁盘支持 (40)可以作为模块加载的SCSI磁盘的最大数量 SCSI磁带支持 投产sc…

jQuerylazyload延迟加载的详细解释

jQuerylazyload延迟加载的详细解释

解释,延迟加载,详细,电脑软件,jQuerylazyload,延迟加载是一个由jQuery插件编写的Javascript。它可以延迟图片中的加载页面。在浏览器外部的图片区域将不会被加载,直到用户将滚动到他们所在的页面。这种图像处理和预加载模式正好相反。 在许多带有…

Excel在Excel中限制单元格输入数据

Excel在Excel中限制单元格输入数据

输入,操作,数据类型,单元格,基础,当您在单元格中输入指定的数据类型和数值时,输入数据超出所需范围而不知道它。为了避免这种情况的发生,萧边教你限制单元格中输入的数据类型的操作技能在Excel。 限制Excel中单元格输入数据类型的操作步骤 …