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 必须在“”（引用）下的 go 下。 此外，第二项有一些语法错误。

 <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>