Question

如果我尝试使用CSS设置背景图像，则不会加载它。如果我在HTML中使用相同的路径，它会。我正在制作这些图像的滑块，因此我需要它来使用CSS。我已经在互联网上浏览了类似问题的所有答案，但没有任何作用。

相关HTML：

                <div class="slider-container">
                    <div class="slider5"></div>
                    <div class="slider4"></div>
                    <div class="slider3"></div>
                    <div class="slider2"></div>
                    <div class="slider1"></div>
                </div>

CSS：

.slider-container {
overflow: hidden;
width: 100%;
height: auto;

}

.slider1, .slider2, .slider3, .slider4, .slider5 {
width: 100%;
height: auto;
position: static;
top: 0px;
cursor: pointer;
transition: all 0s linear;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
-o-transition: all 0s linear;

}

.slider1 {
background: url(../images/jbscomicback.jpg) no-repeat;
display:block;
animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
-o-animation: cycle 25s linear infinite;
-moz-animation: cycle 25s linear infinite;

}

^重复每个.slider（数字）

Answer 1

设置高度

更新了CSS

.slider-container {
overflow: hidden;
width: 100%;
height: auto;}
.slider1, .slider2, .slider3, .slider4, .slider5 {
width: 100%;
height: 400px; /*------------Height-----------*/
position: static;
top: 0px;
cursor: pointer;
transition: all 0s linear;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
-o-transition: all 0s linear;    }
.slider1{background:url(background: url(http://dummyimage.com/600x400/000/fff) no-repeat;) no-repeat;
display:block;
animation: cycle 25s linear infinite;
-webkit-animation: cycle 25s linear infinite;
-o-animation: cycle 25s linear infinite;
-moz-animation: cycle 25s linear infinite;
}

HTML

<div class="slider-container">
                <div class="slider1"></div>
                <div class="slider1"></div>
                <div class="slider1"></div>
            </div>

图像不会通过CSS显示

1 个答案: