Question

我有以下代码

<style>
    .first {
        width: 100%; 
        height: 600px; 
        margin:20px 0;
    }
</style>


<div class="first" 
     style="background: url(myimage.jpg) no-repeat scroll 0px 0px / 100% 1800% transparent;">
</div>
<div class="first"  
     style="background: url(myimage.jpg) no-repeat scroll 0px -600px / 100% 1800% transparent;">
</div>

正如您可能已经观察到的那样，在这些div的背景中唯一改变的是y偏移。我有什么方法可以为n：孩子立刻设置y-offset？还有什么可以达到同样的目的吗？

像

这样的东西

div:nth-child(n) { 
    background: url(myimage.jpg) no-repeat scroll 0px -600px*n / 100% 1800% transparent; 
}

这将节省大量时间。

更新

我不需要放两张图片而不只是两张。

Answer 1

您可以尝试这样的事情：

<style>
.first {
    width: 100%; 
    height: 600px; 
    margin:20px 0;
    background: url(myimage.jpg) no-repeat scroll 0px 0px / 100% 1800% transparent;
}
.last {
    background-position: 0px -600px;
}
</style>


 <div class="first">
 </div>
 <div class="first last">
 </div>

有几个选项可用，但对于这个问题，这是一个非常简单的选项。

如果您真的想在css上节省时间，请尝试使用Sass之类的预处理器。

Answer 2

您可以使用CSS3 nth-last-child（1）。另请参阅链接以供参考。 https://css-tricks.com/almanac/selectors/n/nth-last-child/

.first {
    width: 100%; 
    height: 600px; 
    margin:20px 0;
    background: url(myimage.jpg) no-repeat scroll 0px 0px / 100% 1800% transparent;
}
div.first:nth-last-child(1) {
    background: url(myimage.jpg) no-repeat scroll 0px -600px / 100% 1800% transparent;
}

使用CSS中的第n个孩子为背景图像添加y偏移量？

2 个答案: