如何将背景图像适合主div？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将背景图像适合主div？相关的知识，希望对你有一定的参考价值。
我想在画布下尝试背景图片。但是，当我将大小设置为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>答案
要使图像占据整个屏幕，您需要将body的高度设置为至少100vh：
body {
margin: 0;
min-height: 100vh;
background-image: url(https://lorempixel.com/1000/800/);
background-size: cover;
}另一答案
您正在尝试将背景图像添加到零高度的容器中，您必须为此容器添加高度或最小高度，因为它没有内容。
另一方面，您可以使用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>以上是关于如何将背景图像适合主div？的主要内容，如果未能解决你的问题，请参考以下文章