背景图片填充问题

最新推荐文章于 2023-11-07 10:42:26 发布

weixin_30536513

最新推荐文章于 2023-11-07 10:42:26 发布

阅读量842

点赞数 1

原文链接：http://www.cnblogs.com/yadiblogs/p/8442981.html

版权

在制作天气预报的网页时，遇到了将背景图片铺满整个页面的问题。

全屏背景的意思就是背景图占满整个浏览器视窗，在没有body其他内容的时候不出现滚动条。就算有滚动条的时候，背景也是固定的，不跟随滚动。
对于这类的全屏背景图片的实现，我们需要注意的是，有五种情况：

图片很小重复铺满整个视窗
被浏览器视窗大小截断
宽度占满浏览器视窗而高度被截断
根据浏览器视窗大小长宽按比例缩放
根据图片与浏览器视窗的相对大小进行缩放或者截断

为此我准备了三张图片作为代表。一张是小图，100px*100px；一张是横向的背景图，1920px*1080px；一张纵向背景图,2062px*3000px。这三张背景图基本上涵盖了我们需要做全屏背景图的需要了。

一、图片很小重复铺满整个视窗

这种情况下，图片一般都是比较简单的，能做到边缘接触后也看不出痕迹的。比如类似羊皮纸背景，你不需要做一张特别大的羊皮纸，只需要做一小张，边缘接触的时候看不出边界就行，然后让它们重复铺满整个浏览器就好了。这样能很大的程度上减轻浏览器以及服务器端的负担。对于用户来说，实际上他只加载了一张很小的图片就实现了全屏背景。
这种情况是最简单的：

body{
  background: url('xxx.jpg');//图片地址和格式依自己存放的图片而定。这边都是以jpg格式为例。下同。
}

这要如何解决呢？解决办法也很简单。当然以上的这种简易写法在PC端的高版本浏览器里一般没有问题，但是在低版本浏览器以及某些手机的浏览器里就会出现问题。究其原因一般是浏览器解析的时候，若body没有设置高度，那么浏览器将会body的高度解析成body内部子元素所占的高度。也就是当子元素的高度不够的情况下，你页面的背景也就只能填充子元素，而剩下的部分就是默认的白色背景色了。

html,body{
  height: 100%;
}

只需将html和body的高度设为100%就行。这样的话背景就能完整填充了。

二、被浏览器视窗大小截断

注意：如果你的背景图片的分辨率比普通的屏幕尺寸大(例如14寸笔记本通常的分辨率是1366*768)，那么这种方法设置的全屏背景将会被浏览器视窗截掉大于浏览器视窗的其他部分。

body{
  background: url('xxx.jpg');
}

注意：这种情况下，当你的浏览器的宽度比你的图片还宽，高度也高过你的图片，那么这样的情况同样会出现第一种情况，就是浏览器将会将这张图复制平铺。实现的方法和第一种是一样的，但是效果却不一样。

三、宽度占满浏览器视窗而高度被截断

这种方式很好理解，这种图一般是长图，也就是高度大于宽度的图。通常在PC端浏览的时候你只能看到这张图片的上半部分（多余浏览器高度的部分就会被截断），而在手机端浏览的时候，由于手机屏幕是竖持，所以能够将这展示出这张背景图的大部分内容。而如果背景图设计合适的话，这种方式的背景图是能够全平台适应的，从宽屏的PC，到窄屏的手机。

下面说一下这种背景图片的实现方式。

在body下新建一行标签。
<img id="background" src="background.jpg">
然后在CSS内我们选中这个ID叫做background的元素。

#background{
  width: 100%;
  position: fixed;
  z-index: -1;
}

原理分析一下，最关键还是这个 position: fixed;，这句话将img这个行脱离了文档流，独立出来，然后通过 z-index: -1将背景图下沉。由于它不属于body里，并且它的高度高于浏览器的高度，所以就会占满整个屏幕。

注意：不过需要注意的是这种方法将会在屏幕的高宽比>图片的高宽比的时候（比如屏幕高宽比为2:1，若图片为3:2），那么背景将会宽度占满宽度，而高度不够，就会留白。不过一般情况下只要选图比例恰当就不会出现这种情况。

四、根据浏览器视窗大小长宽按比例缩放

这种方式的背景图推荐为PC或者手机端单独准备的背景图。
同样在body下新建一行标签。
<img id="background" src="background.jpg">
在CSS内我们选中这个ID叫做background的元素。

#background{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

实际上，这种方法的原理就是将图片的四周粘死在浏览器的四边，浏览器视窗怎么变化图片也怎么变化。所以最好是宽屏对应宽图，手机端就配长图。这样的话比例也不会失真太多。不过缺点就是需要分别给手机和PC配图。

五、根据图片与浏览器视窗的相对大小进行缩放或者截断

这种方法是适配程度最高的。也就是不管是长图宽图，它都能适配整个屏幕。
这里需要用到background-size属性的cover值。

实现方法如下：

body,html{
  height: 100%;
}

body{
  background: url('xxx.jpg') no-repeat fixed;
  background-size：cover;
}

它实现的效果是：当浏览器的视窗比例和背景图片的长宽比差不多的情况下，那么整张图会自动计算比例贴合整个屏幕。当视窗长宽比>图片长宽比的时候，会自动抛去图片右侧的部分使剩下的部分的长宽比契合屏幕的长宽比。同样，当视窗的长宽比<图片长宽比的时候，也就是屏幕宽度太宽而高度太小的时候，将会自动抛去图片底部的部分使剩下的部分的长宽比契合屏幕的长宽比。也就是这种做法将会能够最好的契合各种设备都能显示出背景图。当然如果背景图里有些重要的消息，需要实时呈现出来的话，还是用上面的方法来展示。如果背景图并不是很重要的话，只是作为一个衬底，那么这种方法将是适配的最好方法。不需要JS也能做到全平台适配。

转载于:https://www.cnblogs.com/yadiblogs/p/8442981.html