两种背景图片不重复的铺满网页屏幕的方法对比（HTML/JSP）

最新推荐文章于 2022-10-07 01:30:00 发布

原创最新推荐文章于 2022-10-07 01:30:00 发布 · 1.1w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#html

web前端开发之路同时被 3 个专栏收录

3 篇文章

订阅专栏

CSS相关

3 篇文章

订阅专栏

HTML相关

1 篇文章

订阅专栏

本文对比了两种使背景图片不重复铺满网页屏幕的方法：一是图片宽高拉伸匹配浏览器，可能导致图片变形；二是图片按比例缩放保持原貌，平铺浏览器。

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

前端布局入门中，基本上都逃不过平铺背景图片的问题，下面就介绍几种图片不重复铺满屏幕的方法。

方法一：

背景图片宽高拉伸至与浏览器页面一致

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三岁的HTML</title>
    <style type="text/css">
        #img {  
        z-index:-1;  /*使背景图片置底显示*/
        position:absolute;/*将背景图片设置成 absolute（绝对定位），使其显示于文档流之下，不占有文档流空间*/  
        width:100%;  
        height:100%;  
}  
    </style>
</head>
<body scroll = no>  <!-- 图片不随滚动条滚动 -->
    <img alt = "图片无法加载" src="pic.jpg" id="img">
    <p><abbr title = "World Health Organization" style = "color:white">WHO</abbr> 成立于 1948 年。</p>
</body>
</html>

方法二：

背景图片按比例缩放，平铺浏览器页面

缩放比例为图片宽度：浏览器宽度

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三岁的HTML</title>
    <style type="text/css">
        body{      
        background-image: url(pic.jpg);      
        background-size:cover;    
     } 
    </style>
</head>
<body scroll = no>  <!-- 图片不随滚动条滚动 -->
    <img alt = "图片无法加载" src="pic.jpg" id="img">
    <p><abbr title = "World Health Organization" style = "color:white">WHO</abbr> 成立于 1948 年。</p>
</body>
</html>