body 背景

关于 body 和 Html 的背景全是坑！注意避开！

画布 canvas

一块区域

特点：

最小宽度为视口宽度
最小高度为视口高度

HTML 元素的背景

覆盖画布

BODY 元素的背景

如果 HTML 元素有背景，BODY 元素正常（背景覆盖边框盒）

如果 HTML 元素没有背景，BODY 元素的背景覆盖画布

关于画布背景图

背景图的宽度百分比，相对于视口
背景图的高度百分比，相对于网页(Html)高度
背景图的横向位置百分比、预设值，相对于视口
背景图的纵向位置百分比、预设值，相对于网页高度

代码

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #008c8c;
        width: 100px;
        height: 100px;
        border: 2px dashed;
      }
    </style>
  </head>
  <body></body>
</html>

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: url("img/main_bg.jpg") no-repeat;
        background-size: 100%;
        background-position: left top;
        width: 3000px;
        height: 100px;
        border: 2px solid #f40;
      }
    </style>
  </head>
  <body></body>
</html>

body 背景 ​

代码 ​

body 背景

代码