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

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>

在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_42583263/article/details/112896766