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

学习&实践爱好者

已于 2022-01-21 06:31:10 修改

阅读量3.9w

点赞数 22

分类专栏： HTML5与CSS3 前端开发文章标签： html css 前端

于 2022-01-21 06:13:07 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/122609516

版权

HTML5与CSS3 同时被 2 个专栏收录

99 篇文章

订阅专栏

前端开发

75 篇文章

订阅专栏

本文介绍两种让背景图片自适应屏幕大小的方法，确保图片既不因分辨率不同而变形，也不会在大屏下出现空白区域。通过调整body标签的样式属性，如background-size和background-attachment等，可以轻松实现这一目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

运行效果：