Nehmen Sie verschiedene Teile eines Bildes für den Hintergrund von zwei Divs

Bei https://es.ikariam.gameforge.com/, drei Boote erscheinen am unteren Rand der Seite. die Elemente mit devtools Inspizieren zeigt, dass sie mit eindeutigen IDs zu verschiedenen divs gehören, wie von links nach rechts folgt:Nehmen Sie verschiedene Teile eines Bildes für den Hintergrund von zwei Divs

div#ship-2, div#ship-1 und div#submarine

Bemerkenswert ist, alle divs das gleiche Bild teilen für ihre backgrounds, in jedem Fall ein anderes Teil/Stück davon nehmen.

Wie kann ich dies mithilfe von CSS implementieren?

Quelle

2017-05-15 HOTOMOL

Ich denke, was Sie nach ist, wie man implementieren Sie CSS-Sprites. Sie können darüber lesen, wie und warum [hier] (https://css-tricks.com/css-sprites/) zu implementieren. Es hat hauptsächlich damit zu tun, die Höhe und Breite eines Objekts stark zu definieren und dann die korrekte "Hintergrund-Position" für den Sprite-Hintergrund festzulegen. Du kannst eine Seite wie [Sprite Cow] (http://www.spritecow.com/) verwenden, um dir zu helfen, das korrekte CSS für dein Sprite zu erzeugen. – zgood

Bitte geben Sie den gesamten relevanten Code in einer [mcve] in der Frage selbst an, ** nicht nur auf einer separaten Site **. Sobald Sie Ihre Antwort erhalten haben, werden Sie diese Website aktualisieren, und dann wird diese Frage niemandem mehr nützen. –

Die Technik in Bezug auf die drei Boote beinhaltet die Erstellung einer CSS sprite, die in diesem speziellen Fall Code betrifft die Höhe, Breite, unten und links oder rechts Eigenschaften des gegebenen Bildes zu manipulieren. Sie können diese Informationen selbst unter Verwendung des „Inspect“ -Funktion Ihres Browsers erkennen, das die folgende CSS-Code für jedes Schiff zeigt, wie folgt:

#ship-1 { 
    background: url(//gf3.geo.gfsrv.net/cdnb1/12ae07bab9d5fd778d5234c27f4d87.png) no-repeat 0 0; 
    height: 192px; 
    width: 345px; 
    bottom: 10%; 
    left: 10%; 
} 

#ship-2 { 
    background: url(//gf3.geo.gfsrv.net/cdnb1/12ae07bab9d5fd778d5234c27f4d87.png) no-repeat -346px 0; 
    height: 224px; 
    width: 280px; 
    bottom: 6%; 
    left: 0; 
} 

#submarine { 
    background: url(//gf3.geo.gfsrv.net/cdnb1/12ae07bab9d5fd778d5234c27f4d87.png) no-repeat -626px 0; 
    height: 174px; 
    width: 260px; 
    bottom: 2%; 
    right: 0; 
}

Siehe demo

Quelle

2017-05-15 19:13:06 slevy1

Nehmen Sie verschiedene Teile eines Bildes für den Hintergrund von zwei Divs

Antwort

Verwandte Themen