CSS 背景图像未显示

Question

为什么背景图像没有显示在页面上？我有包含两个背景图像列表项的无序列表。

.grid {
height: 350px;
padding: 20px;
background-clip: content-box;
background-size: cover;
background-position: center;
}
.small {
flex-basis: 30%;
}
.large {
flex-basis: 70%;
}

<ul class="grid">
<li class="small" style="background-image: url(https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg);"></li>
<li class="large" style="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);"></li>
</ul>

Answer 1

您需要将background-image: url添加到第二个li，以便代码注册 URL。

<li class="large" style="background-image: URL(https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);"></li>

或者，我建议您将url转移到CSS文件，以使HTML代码更整洁，更具可读性。

.small {
[other css]
background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg");
}
.large {
[other css]
background-image: url("https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
}

Answer 2

您缺少第二个列表项的background-image:url()。

.grid {
height: 350px;
padding: 20px;
background-clip: content-box;
background-size: cover;
background-position: center;
}
.small {
flex-basis: 30%;
}
.large {
flex-basis: 70%;
}

<ul class="grid">
<li class="small" style='background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg");'>
</li>
<li class="large" style='background-image:url("http://placekitten.com/301/301")';></li>
</ul>

将代码移动到 css 文件：

.grid {
height: 350px;
padding: 20px;
background-clip: content-box;
background-size: cover;
background-position: center;
}
.small {
flex-basis: 30%;
background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg");
}
.large {
flex-basis: 70%;
background-image: url("http://placekitten.com/301/301");
}

<ul class="grid">
<li class="small">
</li>
<li class="large"></li>
</ul>

Answer 3

图像的URL必须放在" "(引号(下。此外，第 2 项有一些语法错误。

<li class="small" style="background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg");"></li>
<li class="large" style="background-image: url("https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");"></li>