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

html-css012

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

高斯模糊是PS、FW图片处理工具搞的。

全屏显示的方法1:使用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 */}2:使用 IMG 标签

<img class=stock style=position: absolutetop: 0pxleft: 0pxheight: 100%width: 100%src=default.jpg补充方法3:使用 CSS3 的背景 Cover

.bg {background: #000 url(scale.jpg) no-repeat center center

-webkit-background-size: cover

-moz-background-size: cover

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

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

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