kostenloser Webspace werbefrei: lima-city


Bild aus Sprite größer anzeigen als es ist

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    ultimate-bravery

    ultimate-bravery hat kostenlosen Webspace.

    Hallo,

    ich habe viele einzelne Bilder zu einem Sprite gemacht. Um jetzt ein Bild aus diesem Sprite auszugeben nutze ich diesen Code:

    <div style="background:url(images/sprites/items.png) no-repeat -0px -48px; width:48px; height:48px;"></div>


    Die einzelnen Bilder im Sprite sind 48 x 48 groß.Jetzt möchte ich die Bilder aber in 64 x 64 ausgeben. Wenn ich die width und height Werte im Style veränder, sieht man auch die Bilder die im Sprite neben dem gewollten Bild sind.
    Wie kann ich also das einzelne Bild aus dem Sprite größer darstellen?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hallo,

    pass auf: du machst einen div ringsherum.Dieser bekommt die Größe 64*64 und der Overflow wird auf Hidden gesetzt. Dann baust du noch einen inneren Div. Wichtig: der innere Div braucht die skalierte größe in Pixeln. Also die Anzahl der Sprites mal 64px anstatt mal 48px.
    Das ist eigentich schon fast alles, dann muss nur noch das Bild verschoben werden. Am besten für jedes Icon eine CSS-Klasse anlegen, dann kann man den Code hinterher gut lesen.
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title></title>
            <style>
                .outer-sprite {
                    height: 64px;
                    width: 64px;
                    overflow: hidden;
                }
                .sprite-sword{
                    margin-left: -64px;
                    margin-top:-64px;
                }
                .inner-sprite {
                    background: url(sprite.png) no-repeat;
                    background-size: 100%;
                    height: 900px;
                    width: 1600px;
                }
            </style>
        </head>
        <body>
            <div class="outer-sprite">
                <div class="inner-sprite sprite-sword">
    
                </div>
            </div>
        </body>
    </html>
  4. Welchen Sinn macht es Bilder größer als die Originalgröße anzuzeigen?

    Richtig. Keinen! Die Qualität geht verloren, Grafiken werden unscharf.

    Bei "normalen" Bildern noch zu verschmerzen, anhand der Größe gehen ich aber davon aus das in der Sprite Icons oder dergleichen verwurstet sind.

    Der bessere Weg ... neue Sprite in der richtigen Größe generieren.

    http://de.spritegen.website-performance.org

    Gibt die auch gleich das entsprechende CSS mit aus.

  5. hallo ultimate-bravery,


    also um die bildausschnitte zu skallieren gibts mehrere css-möglichkeiten... eine hat the-8-beta ja schon beschrieben.

    wenn du die bildausschnitte in verschiedenen größen benutzen willst und weder den qualitätsverlust vom hochskallieren noch den datenmengenüberschuss durchs runterskallieren haben möchtest bieten sich vektor-grafiken an.

    falls es sich bei den bildchen um icons handelt ist meiner meinung nach eine sehr interessante möglichkeit es gar nicht mit images sondern mit text-glyphen umzusetzen... also eine eigene schriftart zu hinterlegen deren buchstaben halt die bilderformen sind. das bietet den vorteil von sprites (keine zusätzlichen verbindungsherstellungen pro bildchen) und vektorgrafiken (unbegrenzte verlustfreie skallierung). ausserdem könnte man sogar bestimmte text-eigenschaften pro instanz ändern (zb farbe). der nachteil läge in der einfarbigkeit (und eventuell in der nicht-korrekten semantik) und im aufwand diese glyphen zu erstellen und zu implementieren (wenn man nicht auf eins der vorhandenen kostenlosen glyphen-iconsets zurückgreifen möchte)

    ein gutes beispiel hierzu: http://www.produktivbuero.de/blog/2013/08/20/eigene-glyphen-in-webfonts-einbinden/


    lg hechma

    Beitrag zuletzt geändert: 31.12.2014 15:09:14 von hechma
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!