Question

我用背景图像创建了这个lightSlider。问题是，当您转到下一张幻灯片时，会出现具有相同背景图像的新图像。我想要修复背景图像，以便它只是滑动的文本或内容。

html代码：

<div class="demo">
    <ul id="demo" class="content-slider">

        <li>
            <div class="slider-content">
                <h3>1</h3>
            </div>
        </li>
        <li>
            <div class="slider-content"><h3>2</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>3</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>4</h3></div>
        </li>
        <li>
            <div class="slider-content"><h3>5</h3></div>
        </li>

    </ul>
</div>

CSS代码：

    ul{
        list-style: none outside none;
        padding-left: 0;


    }
    .content-slider li{

        text-align: center;
        color: #FFF;
        background:url('http://tnuqq21kt870t8n1egkbrmbr.wpengine.netdna-cdn.com/wp-content/uploads/2014/10/MLG-Championship-Anaheim-2014-Crowd-Enrique-Espinoza.jpg') no-repeat;background-size: cover;

    }

    .content-slider {

    }

    .content-slider .slider-content {
        margin: 0;
         padding: 60px 20px;

    }
    .demo{

          position: relative;
           overflow: hidden;
        width: 300px;


    }

Answer 1

尝试在演示类中添加背景，例如

.demo {
    position: relative;
    overflow: hidden;
    width: 300px;
    background:url('http://tnuqq21kt870t8n1egkbrmbr.wpengine.netdna-cdn.com/wp-content/uploads/2014/10/MLG-Championship-Anaheim-2014-Crowd-Enrique-Espinoza.jpg') no-repeat;
    background-size: cover;
}

Demo

此外，如果您希望子弹背景为白色，请在样式表中添加以下属性

.lSSlideOuter .lSPager.lSpg{
    background:#FFF; // use !important in case of overwrite
}

Another demo

修复了lightSlider中的背景

1 个答案: