En la página web, estoy escalando todas mis imágenes en un 50% con CSS para que se vean nítidas en las pantallas Retina, pero eso no funciona para imágenes en mosaico, parece que no hay forma de escalar una imagen de fondo para que sea nítido y no se duplique el tamaño en las pantallas de la retina. Lo siento si esta pregunta es confusa.¿Cómo se hace que un fondo con mosaico/repetido CSS permanezca nítido en una pantalla Retina?
Configuración background-size: 150px 150px; para una imagen de fondo de 300x300 parece hacer el truco. Tenga en cuenta que background-size: 50%;no haga lo que podría esperar, ya que establece el ancho y la altura en el 50% del contenedor primario.
Estaba teniendo este problema y apliqué el tamaño de fondo y funciona. ¿Es un error? –
@ChimKan: No, es debido a la forma en que las pantallas de Retina tratan los tamaños de píxeles. Esto es para hacer que las páginas web no diseñadas para pantallas PPI altas sean legibles. Por ejemplo, el texto 9px se vería como texto de 4,5 píxeles en una pantalla normal, solo que más nítido. – Kaivosukeltaja
No he trabajado con pantallas Retina, pero me imagino que sería mejor crear una imagen de fondo alternativa con una resolución más alta para ellas.
Una imagen alternativa no ayuda, solo escala esa imagen 2x y se ve borrosa. – rizzle
Lo hace del tamaño que necesita en Photoshop. Usted no lo escala en absoluto. Ese es el punto de producir una imagen única en primer lugar. De esta forma puedes mantenerlo escalado al 100%. – RyanJMcGowan
Ryan, iPhone hace la escala en sí. Ver este artículo: http://weedygarden.net/2010/10/retina-display-and-css-background-images/ – Kaivosukeltaja
en lugar de escalar las imágenes por css, ¿ha intentado utilizar imágenes que ya tienen el tamaño y la calidad adecuados? –
No se trata de los archivos en sí, las pantallas retina escalan las imágenes 2x, por lo que si las muestra al 50%, se verá bien, de lo contrario, se verá borrosa. – rizzle