Cache busting images within CSS

Question

Just trying to work out the best way to cache bust images within CSS files.

Say I was using CSS sprites and I was using the one image for like 10 different elements scuh as..

.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;
}

Then I updated the image and I wanted to add a new element such as..

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

I know I can cache bust this by doing something like:

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

But wouldn't this cause 2 requests now because of the different filenames? ...do I really have to update each and every reference to this image to avoid multiple requests for the same image? ...or is there a better way?

Answer 1

您可以为background-image使用一个通用class ，而不是为每个元素class使用background-position