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

时间:2019-03-18 03:27:38

标签: html5 css3

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

注意: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;
}

2 个答案:

答案 0 :(得分:0)

希望这对您有用:

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%;可以拉伸图像。这完全取决于图像的大小。

答案 1 :(得分:0)

请不要使用此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>