css布局网页底部样式，当浏览器缩小后，背景图片出现空白

html-css011

css布局网页底部样式，当浏览器缩小后，背景图片出现空白,第1张

因为浏览器并不知道您footer的宽度和高度的比，就如同用一张背景图想让body标签 背景 自适应 整个屏幕一样不可能。

只有定义footer的宽度100% 并且 position为fixed 才行的。

background-size: 100% 100%背景充满

cover: 缩放图像的最小值，其宽度和高度都能放入内容区域 【用这个】

contain：缩放图像的最大值，其宽度和高度都能放入内容区域

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：body {background: url(image.jpg) no-repeatbackground-size: 300px}。

3、浏览器运行index.html页面，此时背景图片成功用css等比例缩小到了300px宽度的大小。