Question

基本上我所拥有的是一个定制的Bootstrap轮播。在它的两侧（覆盖旋转木马而不是控件，控件的z-index为900和950）我想要从透明到黑色的淡入淡出，因此旋转木马将自动与背景融合。

首先，我试图简单地放置两个白色背景的div。出于某种原因，他们不会表现出来。即使我使用Opera / Chrome开发人员工具来隐藏旋转木马本身，他们也不会。

HTML;

    <!--
    --
    -- Carousel start
    --
    !-->

    <div class="col-lg-12 carousel slide" id="carousel_45c48cce2e2d7fbdea1afc51c7c6ad26">

      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#carousel_45c48cce2e2d7fbdea1afc51c7c6ad26"></li>
        <li data-slide-to="1" data-target="#carousel_45c48cce2e2d7fbdea1afc51c7c6ad26" class=""></li>
    </ol>
    <a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
        <img alt="Previous" src="img/icons/arrow_left.png">
    </a>
    <a data-slide="next" href="#carousel-example-generic" class="right carousel-control">
        <img alt="Next" src="img/icons/arrow_right.png">
    </a>
    <!-- Wrapper for slides -->
    <div style="width: 1200px; height: 486px;" class="carousel-inner">
       <div style="background: url(''); width: 1200px; height: 486px;" class="item active">         
           <p class="description">"Um a ipid exerror abopor aut quiam fuga. Nim nest, sit, quoid maiorion presunt dis explaiut officia."</p>
       </div>
       <div style="background: url(''); width: 1200px; height: 486px;" class="item">            
           <p class="description">"Um a ipid exerror abopor aut quiam fuga. Nim nest, sit, quoid maiorion presunt dis explaiut officia."</p>                        
       </div>
   </div>

LESS CSS：

#content {
    #blackbox {
        width: 100%;
        height: 185px;
        margin-top: 38px;
        background-color: #000;
        position: absolute;

        .fadecontainer {
            width: 1200px;
            height: 100%;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            .fade {
                width: 350px;
                height: 100%;
                position: absolute;
                top: 0px;
                margin: 0px;
                padding: 0px;
                display: inline-block;
                z-index: 1500;
                border: 1px red solid;
                font-size: 400px;
                pointer-events: none;

                background-image: url('/uploads/image/inschrijven.png');
                background-color: #fff;

                &.right {
                    right: -15px;
                }

                &.left {
                    left: -15px;
                }
            }
        }
    }
}
.container {
    .carousel {
        display: block;
        width: 1200px;
        height: 486px;
        margin: 0px;
        padding: 0px;
        position: relative;

        .description {
            color: rgb(242,242,242);
            font-size: 24px;
            line-height: 35px;
            margin: 0px;
            padding: 0px;
            position: absolute;
            left: 80px;
            top: 180px;
            display: block;
            max-width: 300px;
        }

        .carousel-indicators {
            width: 250px;
            height: 15px;
            position: absolute;
            bottom: 20px;
            left: 35px;
            margin: 0px;
            padding: 0px;
            display: block;
            z-index: 950;

            li {
                width: 15px;
                height: 15px;
                float: left;
                border: none;
                background-color: #fff;
                margin: 0px;
                margin-right: 8px;
                padding: 0px;

                &.active {
                    background-color: @flinckpink;
                }
            }
        }

        .carousel-control {
            z-index: 900;
            background: transparent;

            &.left {
                width: 68px;
                img {
                    float: left;
                    margin-left: 10px;
                }
            }

            &.right {
                width: 68px;
                img {
                    float: right;
                    margin-right: 10px;
                }
            }

            img {
                margin-top: 219px;
            }
        }   
    }
}

现在，我一直在尝试任何我能想到的东西，但是现在我真正想要的是每边都看到一个白色的div。当我在开发工具中选择元素时，div显示为蓝色方块，因此它确实将它放在正确的位置和所有内容;它只是不可见。

CSS div没有显示

0 个答案: