Bootstrap Carousel：在CSS中编辑背景为纯黑色

Question

只是想知道，我一直试图将我的旋转木马纯黑色的背景与我的整体网站背景相匹配，但我似乎无法让它发挥作用。感觉我错过了一些明显的东西，但我不能为我的生活看到那是什么。

这是我的旋转木马css：

.carousel {
    background-color: #000000;
    color: #000000;
    height: 500px;
    margin-bottom: 60px;
}

.carousel-caption {
    z-index: 10;
}

.carousel-caption h1 {
    z-index: 10;
}

.carousel-caption p {
    z-index: 10;
}

.carousel .item {
    height: 500px;
    background-color: #000000;
}
.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

这是我特定的旋转木马html：

<!-- Carousel -->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="someimage" alt="First slide">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Introducing astrobox</h1>
                                <p>sdfsdfsdf</p>
                                <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign Up</a></p>
                            </div>
                        </div>
                        </div>
                <div class="item">
                    <img src="someimage" alt="Second slide">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>Another example headline.</h1>
                                <p>dfsdfsdf</p>
                                <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                            </div>
                        </div>
                        </div>
                <div class="item">
                    <img src="someimage" alt="Third slide">
                        <div class="container">
                            <div class="carousel-caption">
                                <h1>One more for good measure.</h1>
                                <p>sdfsdfsdf</p>
                                <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                            </div>
                        </div>
                        </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

如果有人确切知道如何做到这一点，我将非常感激。