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

2025-03-30 07:49:47

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

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

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

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

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

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

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

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

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

如何让背景图片自适应填充整个屏幕
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢