引导轮播背景图像不显示答案

【问题标题】：Bootstrap Carousel Background Image Doesn't Show引导轮播背景图像不显示
【发布时间】：2018-01-19 01:49:57
【问题描述】：

旋转木马正在滑动并在其中显示文本，但不显示背景图像。当我尝试将图像直接添加到其中时，它会显示图像，但我希望它是背景图像。这是我的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = ">

<title> My Portfolio </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

<div id="theCarousel" class="carousel slide" data-ride = "carousel">

<ol class="carousel-indicators">
    <li data-target = "#theCarousel" data-slide-to = "0" class="active">
</li>
    <li data-target = "#theCarousel" data-slide-to = "1"></li>

</ol>

<div class="carousel-inner">
<div class="item active sl1">

    <p>
        Text
    </p>
</div>

<div class="item sl2">

    <p>
        Text
    </p>
</div>

</div>

<a class="left carousel-control" href="#theCarousel" data-slide= "prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<a class="right carousel-control" href="#theCarousel" data-slide= "next">
<span class="glyphicon glyphicon-chevron-right"></span>
</div>

</body>

</html>

<script src = "https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src = 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

CSS 文件：

.sl1 {
  background-image : url(img/sl1.png) top center no-repeat;;
}

.sl2 {
  background-image: url(img/sl2.png) top center no-repeat;

}

我认为我在 css 方面做错了，但我不确定是什么。

【问题讨论】：

图片路径是否正确？
你也可以分享一个codepen吗？
是的，它是正确的。
很遗憾我做不到。
你试过在浏览器工具中检查 CSS 吗？图片加载了吗？

标签： html css twitter-bootstrap

【解决方案1】：

您正在使用background-image 属性。

请改用background。

.sl1 {
  background: url(img/sl1.png) top center no-repeat;;
}

.sl2 {
  background: url(img/sl2.png) top center no-repeat;

}

【讨论】：

所以你的 div 类 sl1 和 sl2 定义了大小？

【解决方案2】：

我建议只使用背景。您可以使用背景图像，但之后需要指定其他所有内容。请参阅background-image: url("images/plaid.jpg") no-repeat; wont show up 了解更多信息。

.sl1 {
  background: url("img/sl1.png") top center no-repeat;
}

.sl2 {
  background: url("img/sl2.png") top center no-repeat;
}

【讨论】：

【解决方案3】：

我让它工作了。我把 img 文件夹放到 css 文件夹中，它工作了。当我直接使用相同的路径添加图像时，它工作了。但我认为它与 url 的工作方式不同。

【讨论】：

这也许是第一条评论中所建议的。路径问题。 background-image 属性也不会采用多个值。
是的。我相信您应该能够将他们的评论变成答案。但是，您只使用背景：还是您的背景图像？我编辑的答案之一建议使用图像的完全限定路径。还建议您检查图像是否实际正在加载。在信用到期时给予信用。
@rach8garg，我建议将图像路径建议添加到您的答案中。 vignerd，接受他/她的回答，因为路径的建议是他/她一开始就提出的，而且背景图像也不正确。
感谢@adpro 支持我的努力。