Question

我正试图将此图像设置为页面的背景，无论出于何种原因，它都将不起作用。目的是使背景图像覆盖页面，而不会垂直或水平裁剪。

注意：CSS文件已连接到文档。

HTML:
<body>
  <main>
    <h2 id="cityName">

    </h2>
    <div id="weatherIcon">
      <img id="weatherIconImg"/>
    </div>
  </main>
</body>

CSS:
body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-repeat: no-repeat;
-webkit-background-size: cover fixed;
-moz-background-size: cover fixed;
-o-background-size: cover fixed;
background-size: cover fixed;
}

Answer 1

希望这对您有用：

body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
background-attachment: fixed;
}

<main>
    <h2 id="cityName">

    </h2>
    <div id="weatherIcon">
      <img id="weatherIconImg"/>
    </div>
  </main>

您应该尝试background-size: Cover;可能会从右侧或底部剪切图像，但使用background-size: 100% 100%;可以拉伸图像。这完全取决于图像的大小。

Answer 2

请不要使用此CSS属性“ background-repeat：no-repeat;”。如果要全屏显示图像。

实际上，您可以通过两种方式解决此问题。 1。使用完整图像并在屏幕较大的情况下重复图像 2.将图像拉伸到整个宽度。

请看下面的代码：

body {
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

 <h2 id="cityName"></h2>
 <div id="weatherIcon">
   <img id="weatherIconImg"/>
 </div>

下面是另一种肉类。

body {
min-height: 100vh;
min-width: 100vw;
background-image: url("https://firebasestorage.googleapis.com/v0/b/production2hats.appspot.com/o/studentPortal%2Fassessment-web-app-essentials%2Fbackground.jpg?alt=media&token=d0e6837f-d037-4fee-97b6-313c8ea6aa80");
background-size: 100% 100%;
}

 <h2 id="cityName"></h2>
 <div id="weatherIcon">
   <img id="weatherIconImg"/>
 </div>

应用固定图像时背景图片不会覆盖，但是应用固定背景时则不会垂直覆盖

2 个答案: