html - 如何拆分每个幻灯片 CSS 的滑块设置

Question

我有 HTML/CSS 中的图片滑块代码，它是为整个滑块创建的。所以提出的问题是，我无法分别为每个滑块设置图像。现在有一个为每个滑块设置的图像。但我想为每个滑块设置单独的图像。这是代码。

<div class="slider">
    <ul class="bxslider">
        <li>
            <div class="container">
                <div class="info">
                    <h2>It’s Time to <br><span>Get back to school</span></h2>
                    <a href="#">Check out our new programs</a>
                </div>
            </div>
            <!-- / content -->
        </li>
        <li>
            <div class="container">
                <div class="info">
                    <h2>It’s Time to <br><span>Get back to school</span></h2>
                    <a href="#">Check out our new programs</a>
                </div>
            </div>
            <!-- / content -->
        </li>
        <li>
            <div class="container">
                <div class="info">
                    <h2>It’s Time to <br><span>Get back to school</span></h2>
                    <a href="#">Check out our new programs</a>
                </div>
            </div>
            <!-- / content -->
        </li>

    </ul>

CSS

---

.slider {
    height: 600px;
    position: relative;
    overflow: hidden;
    margin-bottom: 94px;
}

.slider .bxslider li {
    background: url(../images/pic_slide.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 600px;
}


.slider .info {
    float: right;
    padding: 122px 15px 0 0;
}

标签： htmlcss

Answer 1

您可以使用nth-child()，

.slider {
    height: 600px;
    position: relative;
    overflow: hidden;
    margin-bottom: 94px;
}

.slider .bxslider li {
    background-size: cover;
    height: 600px;
}
.slider .bxslider li:nth-child(1) {
    background: url(../images/pic_slide.jpg) no-repeat 50% 50%;
}
.slider .bxslider li:nth-child(2) {
    background: url(../images/pic_slide2.jpg) no-repeat 50% 50%;
}
.slider .bxslider li:nth-child(3) {
    background: url(../images/pic_slide3.jpg) no-repeat 50% 50%;
}

.slider .info {
    float: right;
    padding: 122px 15px 0 0;
}