如何让HTML页面中的背景图片自适应浏览器高度和宽度大小

最新推荐文章于 2024-08-26 15:05:50 发布

大胖东

最新推荐文章于 2024-08-26 15:05:50 发布

阅读量6.7k

点赞数 5

分类专栏： HTML 文章标签： html css3 css

本文链接：https://blog.csdn.net/qq_42583263/article/details/112896766

版权

HTML 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

HTML页面中的背景图片自适应浏览器高度和宽度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML页面中的背景图片自适应浏览器高度和宽度</title>
    <style type="text/css">
    body{
        background: url(1.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -o-background-size: cover;                

      }

    </style>
  </head>
  <body>

12345

  </body>
</html>

在这里插入图片描述

方法二：

效果更好，减少放大失真

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML页面中的背景图片自适应浏览器高度和宽度</title>
    <style type="text/css">
    body{
        background-image: url(1.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
      }

    </style>
  </head>
  <body>

123

  </body>
</html>