Hintergrund der Größe mit mit css-sprites

Ich habe eine Liste und jede <li> hat ein icon und einen text.

Das Bild von icons ist ein sprite-Bild, so dass ich brauche, um die background-size jeder li um die Größe eines Symbol.

Wie kann ich das mit CSS?

InformationsquelleAutor rizidoro | 2012-02-01
  1. 2

    Können Sie den hintergrund Bild Größe in CSS3 wie background-size: 32px 32px; aber das ist nicht wirklich cross-browser-kompatibel und ich denke, das ist, was Ihr Anliegen ist.

    Es sei denn, der sprite ist gut verteilt werden und vertikalen, meine Empfehlung wäre ein wenig extra-markup. Zum Beispiel, verwenden Sie markup wie 

    <li><span class="ico"></span>This is an li element.</li>

    und Stil der span element mit passender Höhe und ein Hintergrundbild sprite. Mit dieser Methode, Ihre li Elemente können eine beliebige Höhe und nur das entsprechende Symbol zeigen würden, trotz der, wie dicht gepackt ist dein sprite.

    • danke dude, es ist nicht eine elegante Lösung, aber funktioniert jetzt...
    InformationsquelleAutor Alex J
  2. 4

    Für Bilder Unterstützung text - Listen mit icons - Sie wären besser dran mit CSS pseudo-Elementen :before oder :after. Dies hält deinen HTML sauber.

    <ul>
   <li>List Item</li>
   <li>List Item</li>
</ul>

li:before
{
   content: "";
   width: 1em;
   height: 1em;
   background: url("image.png") -12px -12px no-repeat transparent;
   display: inline-block;
}

    Für weitere Informationen über diese Technik, check-out http://css-tricks.com/.

    InformationsquelleAutor Carey
  3. 0

    Müssen Sie die Höhe. background-repeat des LI sowie die Polsterung.

    Hier ist ein praktisches tutorial: preview.moveable.com/JM/ilovelists

    InformationsquelleAutor Diodeus - James MacFarlane
  4. 0

    Hier ist ein Beispiel. Swap-platzieren Sie Ihre sprite auf die hellgraue Fläche: http://jsfiddle.net/Pf7Xs/

    Ist das, was Sie fragten? Mit einem sprite-Bereich und den text innerhalb eines <li> von der gleichen Größe?

    Sie werden meist mit line-height und height zu line-up, was Sie wollen.
    hoffe, das hilft.

    InformationsquelleAutor yesse
Schreibe einen Kommentar