Bild aus Sprite größer anzeigen als es ist

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
ultimate-bravery

ultimate-bravery hat kostenlosen Webspace.
16:50, 10.12.2014
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?
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

17:42, 10.12.2014

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>

pcw

pcw hat kostenlosen Webspace.

17:58, 11.12.2014
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.
hechma

hechma hat kostenlosen Webspace.

12:14, 31.12.2014
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
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

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city