बेसिक लिंक रोलओवर सीएसएस स्प्राइट के रूप में - सीएसएस-ट्रिक्स

a ( background: url(sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px; ) a:hover ( background-position: 0 -30px; )

सेट ऊँचाई और चौड़ाई स्प्राइट का केवल एक भाग सुनिश्चित करती है। पीएनजी ग्राफिक दिखाया गया है। रोलओवर पृष्ठभूमि छवि की स्थिति को बदलता है, ग्राफिक के एक अलग क्षेत्र का खुलासा करता है।

CodePen पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन केबीज्वग देखें।