Heim >Web-Frontend >HTML-Tutorial >CSS 实现背景图尺寸不随浏览器缩放而变化_html/css_WEB-ITnose

CSS 实现背景图尺寸不随浏览器缩放而变化_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:57:261628Durchsuche

<!-- Author:博客园小dee -->

一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变:

再比如花瓣网( huaban.com ):

 

现在用CSS来实现这一效果。

首先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/skin/12.jpg?2 );花瓣背景图的尺寸为1600*1600px( 图片地址:http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg );

然后有两种方法可以达到背景图不缩放的效果:

方法一. 把图片作为background

有几个CSS的属性要提一下:background-size:cover,这个CSS3的属性作用是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中,如果不使用这个属性,在IE11和FireFox中缩放浏览器,背景图片会随之缩小,同时使用-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器;background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动,当设置为fixed时页面的其余部分滚动时,背景图像不会移动。

 

代码( 用了百度的星空图,效果和上面百度的截图一至 ):

HTML:

<div id="con"></div>

CSS:

 1 body{ margin:0; padding:0;} 2 #con{  3  4     position:absolute; 5     top:0; 6     left:0; 7     height:100%; 8     width:100%; 9     background-image:url("maskimg/star.jpg"); 10     background-position: center 0;11     background-repeat: no-repeat;12     background-attachment:fixed;13     background-size: cover;14     -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */15     -o-background-size: cover;/* 兼容Opera */16     zoom: 1;    17 }

 

方法二.不把图片作为背景,而是使用CSS 实现背景图尺寸不随浏览器缩放而变化_html/css_WEB-ITnose标签,效果是图片尺寸不会随浏览器缩放而变化,但是如果有竖直滚动条时,图片不会固定而会随滚动条移动。只需要把图片的宽度width设置成100%就行了。

代码很简单,只有几行,用的还是百度的星空图:

HTML:

<div id="con"><img  id="pic" src="maskimg/star.jpg" alt="CSS 实现背景图尺寸不随浏览器缩放而变化_html/css_WEB-ITnose" ></div>

CSS:

1 body{ margin:0; padding:0;}2 #pic{ width:100%;}

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn