一些网站首页背景图的大小不会随浏览器缩放而变化。 例如,在百度个人版的首页中,缩放后的背景图的尺寸不会发生变化。
这具有例如在swdjw为1024*768px的分辨率的画面上看到完整的背景后,切换为1280*800px的分辨率的显示器进行浏览时,背景不会填满画面的优点。 换句话说,在每个分辨率的显示器下可以看到整个屏幕的背景图。
用CSS实现这个。
其次,有两种方法可以获得不缩放背景图的效果。
方法1 .图片为background (百度、花瓣等)
提到一些CSS的属性。 background-size:cover。 此CSS3属性的作用是将背景图像扩展得足够大以使背景图像完全覆盖背景区域。 背景图像的一部分可能无法显示在背景的定位区域。 如果不使用此属性,在IE11和FireFox中缩放浏览器将缩小背景图像。 同时使用- WebKit-background-size 3360 cover和-o-background-size: cover以确保WebKit内核浏览器和Opera浏览器的兼容性; background-attachment属性设置背景图像是固定的还是滚动以适合页面的其馀部分。 当设置为fixed时,如果页面的其馀部分滚动,背景图像不会移动。
代码(使用百度星图,效果和上面百度截图一至) :
HTML :