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

html-css015

如何将网页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 */

}

#header{ height:118pxbackground:#c60 url(header-back.jpg) center repeat}

根据你的CSS代码，这里的repeat表示背景图片进行水平及垂直平铺。平铺不会照成图片的模糊。因为是背景图，height也不会影响到图片模糊。

有可能是你自己不小心把浏览器的显示放大了（按住了ctrl键并滑动了鼠标滚轮或者按住ctrl键并按了+键，这样都会放大浏览器显示），照成了在浏览器中观看图片比在图片查看软件中的原图片要模糊，只要调整回去即可。点击浏览器空白处，然后同时按住ctrl键 和 0键（这里是零，不是o） ，即可恢复原状。