时间戳

首页 > 解决方案 > CSS背景图像不显示

html - CSS背景图像不显示

问题描述

为什么背景图片不显示在页面上？我有一个无序列表，其中包含两个背景图像列表项。

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

标签： htmlcssbackground-image

解决方案

您需要添加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>

或者，我建议您将您的 CSS 文件转移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");
}

推荐阅读