为什么我的背景图像没有显示

Question

很多人都问过类似的问题，但我不知道他们是如何具体应用于我的情况的。

.container {
margin: 0 auto;
background-image: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') no-repeat;
background-size: 100px;
}

<div class="container">

</div>

是否需要在div中添加一些内容以使其显示？我想如果我只是做一个div并定义宽度，它会起作用，但我被难住了。我知道这很简单，我错过了

Answer 1

no-repeat它导致了第一个问题，不允许将值应用于background-image，并且您的container在本例中没有高度，您需要指定它或将内容添加到container

.container {
margin: 0 auto;
background-image: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80');
background-size: 100px;
background-repeat: no-repeat;
min-height: 100px;
}

<div class="container">

</div>

Answer 2

您必须为容器指定宽度和高度。删除无重复，改为添加此背景重复：无重复；

Answer 3

您需要添加一个高度，并且需要从background-image声明中删除"no repeat"。有一个声明background-repeat，我们可以使用它来代替。

.container {
/* added these next 2 lines, and remove 'no-repeat' from the background-image */
height:200px;
background-repeat: no-repeat;
width: 200px;
margin: 0 auto;
background-image: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80');
background-size: 100px;
}

<div class="container">

</div>

Answer 4

.container {
margin: 0 auto;
background: url('https://images.unsplash.com/photo-1539683255143-73a6b838b106?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80') no-repeat;
background-size: 100px;
height: 151px;
width: 100px;
}

<div class="container"></div>