Question

我100％不知道为什么我无法显示background-image。我尝试了多种不同的图像来排除这种情况。我还将src更改为url，将background-size从cover更改为auto 100%。我所做的一切都无法显示图像。

有谁知道为什么我的背景图片不会显示？

#home-img {
	background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-position: 50% 50%;
	width: 100%;
	height: auto;
	position: relative;
}

<div id="home-img">
</div>

这是jsfiddle

Answer 1

使用Chrome Inspect，我从＆＃34; auto＆＃34;更改了＃home-img height到537px，然后出现了图像。因此，更新高度是解决此问题的一种选择。

此SO＆amp; A条目涵盖了另一个选项。

How to get div height to auto-adjust to background size?

Answer 2

如果您使用背景图片并且您没有div内的内容，则始终应设置高度。以下是示例https://jsfiddle.net/5pphkLmt/5/

<div id="home-img">
        </div>

#home-img {
    background-image: url("http://cosmotekcollege.com/wp-content/uploads/2015/08/ban4.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-position: 50% 50%;
    width: 100%;
    height: 540px;
    position: relative;
}

Answer 3

您应该在代码中添加height或在此DIV中添加内容，只需测试height: 100px;并享受它：）

不会出现背景图像

3 个答案: