Html 我的旋转木马中的视差效果有问题

我想在我的网站上包括三个旋转木马，应该是全高的，应该有视差效果。我有一段代码片段，是我不久前发现的，它就是不起作用。视差效果不起作用，并且图片不能全高显示

以下是我的html代码：

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
                <ol class="carousel-indicators">
                    <li data-target="#carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel" data-slide-to="1"></li>
                    <li data-target="#carousel" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <a href="learnmore.html">
                            <div class="jumbotron paral paralsec">
                                <h1 class="display-3">Customer orientation</h1>
                                <p class="lead">Every product is individually customized to your needs</p>
                            </div>
                        </a>
                    </div>

                    <!-- /.carousel-item -->

                    <div class="carousel-item">
                        <a href="lenses.html">
                             <!-- Second Parallax Section -->
                            <div class="jumbotron paral paralsec1">
                                <h1 class="display-3">Customer orientation</h1>
                                <p class="lead">Your project is at the center of our process chains</p>
                            </div>
                        </a>
                    </div>

                    <!-- /.carousel-item -->

                    <div class="carousel-item">
                        <a href="lmkposition.html">
                             <!-- Third Parallax Section -->
                            <div class="jumbotron paral paralsec2">
                                <h1 class="display-3">Customer orientation</h1>
                                <p class="lead">All our services are supported by our support team which is always there for you</p>
                            </div>
                        </a>
                    </div>

                    <!-- /.carousel-item -->

                </div>

                <!-- /.carousel-inner -->

                <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>

                <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>

            </div>

如您所见，我试图更改图像大小的一些值，但没有效果。此外，只有我的旋转木马的第一个图像显示，旋转木马有边框，即使我试图删除它们

---

CSS适用于所有三个旋转木马，但我只包含其中一个的html代码，因为它们是相同的，而第一个是最容易出问题的。不要忘记CSS中的注释是这样的：

/*comment*/

，并且不要忘记星号。我的代码中有星号，只有Stackoverflow似乎将它们视为格式，因此是蓝色。

    .carousel, .slide,
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item img,
.carousel .carousel-control {
  border-radius: 0px;
  overflow: hidden;
}

/ Header Parallax Element Style/

.paral {

min-height: 900px;

background-attachment: fixed;

background-size: cover;

background-position: 50% 50%;

}

/ Paragraph for Parallax Section /

.paral p {

font-size: 24px;

color:#f5f5f5;

text-align: center;

line-height: 60px;

}

/ Heading for Parallax Section /

.paral h1 {

color: rgba(255, 255, 255, 0.8);

font-size: 60px;

text-align: center;

padding-top: 60px;

line-height: 100px;

}

/ Image for Parallax Section /

.paralsec {

background-image: url(img/customer.jpg);
background-size: 100% !important;
}

.paralsec1 {

background-image: url(img/customer.jpg);
height: 100%;}

.paralsec2 {

background-image: url(img/customer.jpg);
height: 100%;}

.paralsec3 {

background-image: url(img/process.jpg);

}

.paralsec4 {

background-image: url(img/process.jpg);}

.paralsec5 {

background-image: url(img/process.jpg);}

.paralsec6 {

background-image: url(img/quality.jpg);}

.paralsec7 {

background-image: url(img/quality.jpg);}

.paralsec8 {

background-image: url(img/quality.jpg);}

/ Add more images for more sections /

/ Remove Bottom Margin from Jumbotron /

.jumbotron{margin-bottom: 0;}

.values {

text-align: center;

display: block;

margin-left: auto;

margin-right: auto;


}