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:

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!