Question

我似乎无法在旋转木马上使用背景图像。其他一切似乎都在起作用，但我无法让那些工作。

<!DOCTYPE html>
<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width = device-width, initial-scale = 1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

这是我放置css的地方，以便设置背景大小以及我计划为每张幻灯片使用的图像。我已经检查并重新检查以确保图像的路径是正确的并且是100％。

<style type="text/css">
        .slide1{
            background-image: url('images/image01.jpg');
            height: 500px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .slide2{
            background-image: url('images/image02.jpg');
            height: 500px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .slide3{
            background-image: url('images/image03.jpg');
            height: 500px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

    </style>
</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>
                <li data-target ="#theCarousel" data-slide-to="2"> </li>
            </ol >

这里是我使用连接到特定幻灯片的类的地方。在我看来，我已经正确输入了代码，但仍然无法弄清楚为什么图像不会显示。

            <div class="carousel-inner">
                <div class="item active" >
                    <div class ="slide1"></div>
                </div>
                <div class="item">
                    <div class="slide2"></div>
                </div>
                <div class="item">
                    <div class="slide3"></div>
                </div>
            </div>

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


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Answer 1

我能够通过设置div的高度和宽度让它们工作（在我的情况下为100％）。看起来如果carousel-item中没有任何内容，它的默认大小为0，因此背景图像不可见。

我正在使用Bootstrap 4并且我将背景直接应用于carousel-item div，但是如果您在现有的slide1等类中添加了width:，它也可以正常工作。

.carousel-item {
    height:100%;
    width:100%;
}

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

    </div>
</div>

或

 .slide1{
     background-image: url('images/image01.jpg');
     height: 500px;
     width: _____;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

背景图像不会显示在bootstrap轮播上

1 个答案: