HTML中背景图片如何自适应屏幕

要求就是图片要求自适应屏幕大小，并且图片不能变形

一张清晰漂亮的背景图片能给网页加分不少，怎么做到背景图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。

法一、在中设置：

其中：

background-size:100%是达到窗口的百分百比例

background-attachment: fixed是图片固定，不随着页面滚动而移动

下面给出完整源码

保存文件名：背景图片如何自适应屏幕.html

运行效果：

法二、在中设置：

下面给出完整源码

保存文件名：背景图片如何自适应屏幕2.html

运行效果：

建议采用法二。

附录

HTML的 body 元素（也称为标签）表示文档的内容，此元素包含的属性background 将URI所指向的图片作为背景。此方法不符合规范，请使用 CSS 的 background 属性替代。可参见：文档主体元素 - HTML（超文本标记语言） | MDN

CSS 的background-size 属性指定背景图像大小，以象素或百分比显示，可参见

background-size - CSS（层叠样式表） | MDN

CSS的background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动，可参见background-attachment - CSS（层叠样式表） | MDN

CSS的background-image 属性用于为一个元素设置一个或者多个背景图像。可参见background-image - CSS（层叠样式表） | MDN