Question

旋转木马正在滑动并显示其中的文字，但它不显示背景图像。当我尝试将图像直接添加到其中时，它显示图像，但我希望它是背景图像。这是我的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做错了但是我不确定是什么。

Answer 1

您正在使用background-image属性。

改为使用background。

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

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

}

Answer 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;
}

Answer 3

我得到它的工作。我将img文件夹放入css文件夹并且它工作。当我使用相同的路径直接添加图像时它工作。但我认为它与url的工作方式不同。

Bootstrap Carousel背景图像不显示

3 个答案: