gpt4 book ai didi

html - Bootstrap 轮播背景图片不显示

转载 作者:行者123 更新时间:2023-11-28 02:18:51 26 4
gpt4 key购买 nike

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

最佳答案

您正在使用 background-image 属性。

改用背景

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

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

}

关于html - Bootstrap 轮播背景图片不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48327148/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com