Question

尝试找出在CSS文件中缓存半身像的最佳方法。

假设我正在使用CSS精灵，我正在使用一个图像，就像10个不同的元素一样......

.element1 {   
    background: url('../images/main-nav.png') left -80px no-repeat;
}

.element2 {   
    background: url('../images/main-nav.png') left -120px no-repeat;
}

.element3 {   
    background: url('../images/main-nav.png') left -160px no-repeat;
}

然后我更新了图像，我想添加一个新元素，如..

.new_element {   
    background: url('../images/main-nav.png') left -200px no-repeat;
}

我知道我可以通过执行以下操作来缓存这个：

.new_element {   
    background: url('../images/main-nav.png?v=1.01') left -200px no-repeat;
}

但由于文件名不同，现在不会导致2个请求吗？ ...我真的必须更新每个对此图像的引用，以避免对同一图像的多个请求吗？ ......还是有更好的方法？

Answer 1

对于class，您可以使用background-image {}对每个元素使用background-position class

在CSS中缓存破坏图像

1 个答案: