Question

我想在画布下尝试背景图片。但是，当我将大小设置为100％时，图像是不可见的。

我该如何解决这个问题？

我想在每个屏幕上都有100％的背景图像。

#bodyy {
  background: url(a.jpg);
  background-size: auto;
  background-repeat: no-repeat;
}

span {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
}

canvas {
  position: absolute;
  display: none;
  border: 1px solid blue;
}

.active {
  display: inline;
}

<div id="bodyy">
  <canvas id="canvas" width="400" height="100"></canvas>
  <div id="map"></div>
</div>

Answer 1

要使图像占据整个屏幕，您需要将body的高度设置为至少100vh：

body {
  margin: 0;
  min-height: 100vh;
  background-image: url(https://lorempixel.com/1000/800/);
  background-size: cover;
}

Answer 2

您尝试将背景图像添加到零高度的容器中，您必须为此容器添加高度或最小高度，因为它没有内容。

另一方面，您可以使用background-size：cover或contains来使背景图像适合视口。

#bodyy {
  background: url(https://placeimg.com/622/220/arch);
  background-size: cover; /* or contain */
  background-repeat: no-repeat;
  /* you have to add height to this container since it has no content*/
  height: 100vh;
}

canvas {
  position: absolute;
  /* display: none; */
  border: 1px solid blue;
}

<div id="bodyy">
  <canvas id="canvas" width="400" height="100"></canvas>
  <div id="map"></div>
</div>

看看这个小提琴：

https://jsfiddle.net/hadabo/622rzdra/3/

如何将backgroundimage适合主div？

2 个答案: