将 body 覆盖在背景图片上 css

Question

我想要一个电脑屏幕作为我的背景图片，我想要我的body在电脑屏幕内。我让它在我的大屏幕上对齐，但在我的小屏幕上尺寸发生了变化。我想让绿色像这样覆盖屏幕：

Large Screen

但在我较小的显示器上看起来像这样：

Smaller Screen

这是我的 css:

html {
  background-image: url(../images/Macbook\ Pro_auto_x2.png);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

body {
    background-color: yellowgreen;
    margin-top: 2.1%;
    margin-left: 16.7%;
    width: 66.65vw;
    height: 83.8vh;
}

这是我的 html:

<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">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <title>Minimal Website</title>
</head>

   <body>  

      <h3>Hello</h3>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter- bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>

</html>

Answer 1

使用覆盖而不是包含

background-size: cover;

将 body 覆盖在背景图片上 css

Overlaying body over background image css

html

css

position

overlay