Wie machst du einen css gekachelt/wiederholten Hintergrund scharf auf einem Retina-Bildschirm?

Auf der Webseite skaliere ich alle meine Bilder um 50% mit CSS, damit sie auf Retina-Bildschirmen scharf aussehen, aber das funktioniert nicht bei gekachelten Bildern, es scheint keine Möglichkeit zu geben, ein Kachel-Hintergrundbild zu skalieren so dass es auf den Retina-Bildschirmen scharf und nicht doppelt so groß ist. Entschuldigung, wenn diese Frage verwirrend ist.Wie machst du einen css gekachelt/wiederholten Hintergrund scharf auf einem Retina-Bildschirm?

Quelle

2012-05-09 rizzle

Haben Sie nicht versucht, die Bilder pro CSS zu skalieren, wenn Sie bereits Bilder in der richtigen Größe und Qualität verwendet haben? –

Es geht nicht um die Dateien selbst, Retina-Bildschirme skalieren Bilder 2x, wenn Sie sie bei 50% anzeigen, dann sieht es gut aus, ansonsten sieht es verschwommen aus. – rizzle

Einstellung background-size: 150px 150px; für ein 300x300 Hintergrundbild scheint den Trick zu tun. Beachten Sie, dass background-size: 50%;nicht tun, was Sie erwarten könnten, da es die Breite und Höhe auf 50% des übergeordneten Containers setzt.

Quelle

2012-05-09 19:48:31 Kaivosukeltaja

Ich hatte dieses Problem und ich habe die Hintergrundgröße angewendet und es funktioniert. Ist es ein Fehler? –

@ChimKan: Nein, es ist wegen der Art und Weise, wie Retina-Displays Pixelgrößen behandeln. Dies dient dazu, Webseiten, die nicht für hohe PPI-Anzeigen ausgelegt sind, lesbar zu machen. Zum Beispiel würde 9px Text wie 4.5px Text auf einem normalen Display aussehen, nur schärfer. – Kaivosukeltaja

-6

Ich habe nicht mit Retina-Displays gearbeitet, aber ich würde mir vorstellen, dass es besser wäre, ein alternatives Hintergrundbild mit höherer Auflösung für sie zu erstellen.

Quelle

2012-05-09 19:34:30 RyanJMcGowan

Ein alternatives Bild hilft nicht, es skaliert das Bild nur 2x und sieht verschwommen aus. – rizzle

Sie machen es die Größe, die Sie in Photoshop benötigen. Sie skalieren es überhaupt nicht. Das ist der Punkt, an dem ein einzigartiges Bild entsteht. Auf diese Weise können Sie es zu 100% skaliert halten. – RyanJMcGowan

Ryan, iPhone macht die Skalierung selbst. Siehe diesen Artikel: http://weedygarden.net/2010/10/retina-display-and-css-background-images/ – Kaivosukeltaja

Wie machst du einen css gekachelt/wiederholten Hintergrund scharf auf einem Retina-Bildschirm?

Antwort

Verwandte Themen