html背景图片自动铺满屏幕 【CSS背景图片页面自适应充满屏幕】

CSS背景图片页面自适应充满屏幕

实现代码：

body {

overflow: hidden;

position: fixed;

width:100%;

height:100%;

background: url("image.png") no-repeat;

background-size:cover;

}

扩展：

background-size的属性：

background-size: auto || || || cover || contain

取值说明：

1、auto:此值为默认值，保持背景图片的原始高度和宽度；

2、此值设置具体的值，可以改变背景图片的大小；

3、此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；

5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。

附：当background-size取值为和时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。

如果觉得《html背景图片自动铺满屏幕 【CSS背景图片页面自适应充满屏幕】》对你有帮助，请点赞、收藏，并留下你的观点哦！