如何将网页CSS背景图高斯模糊且全屏显示

html-css020

如何将网页CSS背景图高斯模糊且全屏显示,第1张

一、高斯模糊是使用ps等工具实现的,方法如下(以ps为例):

1、在ps中打开背景图;

2、点击菜单栏中的滤镜;

3、点击模糊,再选择高斯模糊,如图;

5、通过调整半径来调整模糊的强度(半径越大越模糊),如图:

二、全屏显示的css代码:

.bg {

   background-image:url(scale.jpg)

   -moz-background-size: 100% 100%/*  Firefox 3.6 */

   -o-background-size: 100% 100%/* Opera 9.5 */

   -webkit-background-size: 100% 100%/* Safari 3.0 */

   background-size: 100% 100%/*  Firefox 4.0 and other CSS3-compliant browsers */

   -moz-border-image: url(scale.jpg) 0/* Firefox 3.5 */

   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale')/* for <ie9 */

}

不求兼容性的话 jQuery+CSS3 就可以比较轻松的实现,如果要兼容性的话就需要比较大量的 JS 代码了,CSS3 兼容性还是不佳,不过目前来看,win xp 的退役导致 ie6和7 的份额大幅下跌,如果从 ie8 开始考虑的话 CSS3 也是不错的选择,如果你想免费、轻松、高效的学习上边提到的技术可以到Web沙龙论坛(百度一下),里边有很多类似的教程,和前辈交流经验,共同进步,祝你早日成功!