Question

好的，我的问题是，如何在一个类中制作css幻灯片，而不必将任何子类或任何内容添加到div中？我只是想在css中使用background属性，如果可能的话。代码是在帖子的结尾，我想如果我可以使div“图像”的背景滑动。提前谢谢。

让我编辑一下问题，我将在页面上有12x6网格框，我需要所有这72个框同时更改背景，但定位看起来像它的所有一个大的继续背景，奠定了在所有这些盒子上，但不是躺在身上，所以我得到马赛克效果。

<div class="wrapper">
    <div class="box"><div class="image"></div></div>
    <div class="box"><div class="image"></div></div>
    <div class="box"><div class="image"></div></div>
    <div class="box"><div class="image"></div></div>
</div>



.image{
    background: url('http://goo.gl/mZc5Ai') no-repeat center fixed;
    position:absolute;
    float: none;
    background-size:100%;
    width:100%;
    height:100%;
}
.box {
    width:140px;
    height:140px;
    float:left;
    margin:10px;
    position:relative;
}

Answer 1

您可以使用同级选择器。

.box .image{ 
    background: url('1.jpg') no-repeat center fixed; here 
    /* all the rest of the default/shared css */
}
.box + .box .image { background-image: url('2.jpg');}
.box + .box + .box .image { background-image: url('3.jpg');}
.box + .box + .box + .box .image { background-image: url('4.jpg');}

请注意，第二个选择器实际上将应用于2-4，但后续选择器将覆盖它。这是因为第三个.box也匹配.box + .box，但.box + .box + .box更具体，因此获胜。

或者您可以使用：nth-child选择器。

.box .image{ 
    background: url('1.jpg') no-repeat center fixed; here 
    /* all the rest of the default/shared css */
}
.box:nth-child(2) .image { background-image: url('2.jpg');}
.box:nth-child(3) .image { background-image: url('3.jpg');}
.box:nth-child(4) .image { background-image: url('4.jpg');}

Here's a fiddle举几个例子。

Answer 2

由于我找不到使用css的解决方案，我使用了jquery，这是我使用的代码：

 $(document).ready(function () {
            var img_array = ['bg2.jpg' , 'bg1.jpg'];
            var index = 0;
            var interval = 10000;
            setTimeout(function () {
                $('.image').css('backgroundImage', 'url(' + img_array[index++ % img_array.length] + ')');
                setTimeout(arguments.callee, interval);
                $('.image').each(function (index) {
                    $(this).hide();
                    $(this).delay(30 * index).fadeIn(2000);
                });
            }, interval);
        });

感谢原始回答：Change the body background image with fade effect in jquery

如何在css中创建幻灯片而不必创建多个类？

2 个答案: