200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 背景图页面缩小会变形_CSS 实现背景图尺寸不随浏览器缩放而变化

背景图页面缩小会变形_CSS 实现背景图尺寸不随浏览器缩放而变化

时间:2022-08-06 06:40:23

相关推荐

背景图页面缩小会变形_CSS 实现背景图尺寸不随浏览器缩放而变化

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

这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px分辨率的显示器浏览,不会出现背景不能充满屏幕的情况。换句话说,就是在各个分辨率的显示器下都能看到充满屏幕的背景图。

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

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

方法一. 把图片作为background( 如百度和花瓣 )

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

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

HTML:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。