HTML中背景图片如何自适应屏幕
要求就是图片要求自适应屏幕大小，并且图片不能变形
一张清晰漂亮的背景图片能给网页加分不少，怎么做到背景图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。
法一、在<body>中设置：
<body background="images\bg.jpg"
style="background-size:100%;
background-attachment: fixed;">
其中：
background-size:100%是达到窗口的百分百比例
background-attachment: fixed是图片固定，不随着页面滚动而移动
下面给出完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片自适应</title>
<body background="./a3.jpg"
style="background-size:100% 100%;
background-attachment: fixed;">
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
</body>
</html>
保存文件名：背景图片如何自适应屏幕.html
运行效果：
法二、在<body>中设置：
<body style="background-image: url(./a3.jpg);
background-size: 100% ;
background-attachment: fixed;" >
下面给出完整源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>图片自适应2</title>
<body style="background-image: url(./a3.jpg);
background-size: 100% ;
background-attachment: fixed;" >
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
<h1>背景图片自适应屏幕</h1>
</body>
</html>
保存文件名：背景图片如何自适应屏幕2.html
运行效果：
建议采用法二。
附录
HTML的 body 元素（也称为标签）表示文档的内容，此元素包含的属性background 将URI所指向的图片作为背景。此方法不符合规范，请使用 CSS 的 background 属性替代。可参见<body>：文档主体元素 - HTML（超文本标记语言） | MDN
CSS 的background-size 属性指定背景图像大小，以象素或百分比显示，可参见
background-size - CSS（层叠样式表） | MDN
CSS的background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动，可参见background-attachment - CSS（层叠样式表） | MDN
CSS的background-image 属性用于为一个元素设置一个或者多个背景图像。可参见background-image - CSS（层叠样式表） | MDN
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
