手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

如何让背景图片自适应填充整个屏幕

时间:2024-10-21 14:09:17

1、首先我们用Dreamweaver软件做一个html文档,当然用其他编辑器也可以。

如何让背景图片自适应填充整个屏幕

2、然后给body设置一个背景图片,这里小编给body加了一个高度,以便能看到图片。

如何让背景图片自适应填充整个屏幕

3、然后先在浏览器中预览一下效果。会看到图片两遍有空白,没有填充满整个屏幕。

如何让背景图片自适应填充整个屏幕

4、那么怎么让背景图片自适应屏幕大小呢?其实只要一个简单的属性即可,就是background-size,可以设置其值为100%。

如何让背景图片自适应填充整个屏幕
如何让背景图片自适应填充整个屏幕

5、需要注意的是这是css3增加的新属骂宙逃慈性,旧版本的浏览器可能不支持。想要了解更多关于background-size的知识请自行百度。

如何让背景图片自适应填充整个屏幕
© 手抄报圈