Anwendung von Sprites in CSS

In diesem Artikel wird hauptsächlich die Anwendung von Sprites in CSS vorgestellt. Dies ist jedoch im Design eine gute Methode .

Der Beispielcode lautet wie folgt:

body { 
  font-family: "Lucida Sans", "Lucida Sans Unicode"; 
  font-size: 14px; 
  line-height: 24px; 
} 
ul { 
  list-style-type: none; 
} 
li { 
  float: left; 

} 
a{ 
  background-image: url(bg.gif); 
  height: 26px; 
  background-position: 53px 0px; 
  display: block; 
  margin-right: 10px; 
  width: 53px; 
  text-align: center; 
  color: #333333; 
} 

li a:link { 
  text-decoration: none; 
} 
li a:visited { 
  text-decoration: none; 
} 
li a:hover { 
  text-decoration: none; 
  background-position: 0 0px;//在这里规定从某一坐标开始显示图片}

Zusammenfassung:

Sogar zwei auf einem so kleinen Bild Tatsächlich ist die Reaktionszeit von Bildern nicht viel langsamer, aber es gibt ein Problem, wenn sich zwei Bilder abwechseln und das Hintergrundbild leicht neu geladen wird, was dazu führt, dass es längere Zeit nicht angezeigt wird.

Verwandte Empfehlungen:

Verwenden Sie CSS-Sprites, um Bildanforderungen zu reduzieren

DIV+CSS-Hintergrund für ein Ganzes Bild (CSS-Sprites)

CSS-Sprites-Technologie zt lernen Webstandards in zehn Tagen (div+css)_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonAnwendung von Sprites in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!