问题
I am using an image sprite that consisting of four "sub-images": four corners for a div element. The sprite is 40px by 40px. Each "sub-image" is 20px by 20px. Each corner's "sub-image is on the opposite corner of the sprite of where it would be on the dev element. For example, the top-left sub-image is at the bottom-right of the sprite.
This div element is 440px wide and 100% tall. I've got the top corners down but how do I get the bottom corners? Is there a way to do this without creating a new sprite? Here is what I've got so far for my CSS rule.
background: -20px -20px no-repeat url(<path>), 420px -20px no-repeat url(<path>);
回答1:
Put background-images on absolutely positioned pseudo-elements.
Demo
Sorry, misread your question, here is the same technique with a 'sprite':
Demo
来源：https://stackoverflow.com/questions/8363535/how-to-position-an-image-sprite-at-the-bottom-of-an-element-of-unknown-height