Las imágenes de fondo CSS no se muestran en el ipad

Estoy totalmente confundido y me pregunto si me está perdiendo algo simple, pero no puedo mostrar una imagen de fondo en un ipad o dentro del simulador de ipad.Las imágenes de fondo CSS no se muestran en el ipad

Como prueba de que arme la siguiente página sencilla:

<html> 
<head></head> 
<body> 
    <img src="content_box_black_background.png" /> 
    <div style="height: 100px; width: 500px; background:url(content_box_black_background.png);"> 
    </div> 
</body></html>

Como prueba Soy también la salida de la imagen directamente encima del bloque div. En Chrome ambos aparecen pero en el simulador ipad tampoco. ¿Algunas ideas?

Fuente

2010-07-23 Benjamin Dell

Si ambos aparecen en cromo, y tampoco aparece en el simulador, entonces yo no sospecha que intentar utilizarlo como una imagen "de fondo" tiene algo que ver con tu problema Parece que el simulador no está recogiendo el camino a la imagen. – ScottS

Mírame bien. Aunque probaría algunas cosas, tal vez el simulador tenga errores: url ('content_box_black_background.png'); o url ('./content_box_black_background.png '); –

¿Qué simulador de iPad? ¿Podrías ponerle un enlace? – Zabba

no he pone a prueba estos, pero tengo algunas ideas que debe probar:

1) ¿Cómo se los archivos colocados en un "disco local" de un iPad? usted no tiene ningún HTTP, así que supongo que tiene la imagen en el "disco duro" (RAM): intente abrir el archivo directamente en el navegador, ¿muestra/descarga?

2) Intente agregar: "display: block;"; a su representación de CSS. Podría hacer el truco

3) La etiqueta IMG, intente agregar ancho y alto, ¿cambia algo?

4) ¿Qué tipo de archivo PNG está utilizando? ¿8 bits o 24 bits?

5) ¿Qué sucede si utiliza un GIF o JPG en su lugar?

6) cuando se utilizan imágenes de fondo. Intente usar el formato largo para los atributos. "background-image: url (image.jpg);".

7) También intente agregar un <!DOCTYPE html> para que el navegador entre en modo HTML5.

Fuente

2010-07-24 00:11:39 BerggreenDK

Gracias por las sugerencias. A menudo se necesita una lista de controles simples para ayudar a resolver las cosas. Todavía no puedo probar cada una de las sugerencias, pero estoy seguro de que será una de ellas (probablemente el formato PNG que he usado en un gráfico en particular). Gracias por tu contribución. –

RAM es la memoria del sistema, mientras que los discos duros son para el almacenamiento de archivos: no tienen relación alguna en los diferentes niveles. – Christian

@Christian - Publiqué "disco duro" como una "similitud". Sé cuál es la diferencia entre Flash RAM, RAM, discos duros, etc. No es necesario votar mi respuesta porque comparo el almacenamiento interno con un disco duro. Eso es a lo que la mayoría de la gente está acostumbrada desde las computadoras normales. Recuperé mi primera computadora en 1987, así que entienda que fue una similitud para la comparación y la explicación. – BerggreenDK

-3

siempre poner comillas alrededor de su url y, o bien la plena url("http://example.com/folder/file.htm") o al menos la barra url("/file.htm")

Fuente

2010-07-24 00:03:38 isildur4

si no hay espacios, las citas NO son necesarias. Lo siento. – BerggreenDK

um, ¿buen hábito de programación? – isildur4

Las cotizaciones son totalmente innecesarias si no hay espacios, y lo mismo se aplica a la especificación de la url completa, ¿por qué realmente quieres eso? CSS lee la URL real en su propio camino. ES DECIR. Si su * .css * se encuentra dentro de '/styles' e imágenes dentro de' /styles/images' usaría url en CSS como 'url (images/ .extension)' ¡y funcionaría perfectamente! – jolt

Podría estar relacionado con las dimensiones de la imagen. El Safari Web Content Guide menciona que el tamaño máximo para imágenes GIF, PNG y TIFF es de 3 megapíxeles (3 * 1024 * 1024). Me encontré con un problema similar que muestra un menú basado en sprites CSS. Tuve que reducir la imagen bastante grande (3000x1500) antes de que cualquiera de los sprites se mostrara en el iPad.

Fuente

2010-11-04 16:09:37 timbonicus

esto resolvió un problema que estaba teniendo con mi sitio ipad - muchas gracias :) – boz

Tuve el mismo problema. Si está utilizando un sprite, asegúrese de que su ancho y altura sean lo más bajos posible. El tamaño de mi sprite era de solo 130k y, sin embargo, el iPad 2 no lo mostraba porque el ancho era de 4000 píxeles. – Shahar

¡Asegúrese de tener un CSS válido! http://jigsaw.w3.org/css-validator/

Me he encontrado con este problema antes y la validación/corrección de mi CSS lo solucionó.

Fuente

2011-02-06 14:00:43

En alguna configuración de tema móvil, encontrará "reducir imágenes grandes en publicaciones o páginas para que quepan en pantallas más pequeñas." active para activar/desactivar. Y desactivarlo ...

Espero que esto resuelva su problema.

Fuente

2013-01-01 06:40:03

IPAD no le gusta cover en taquigrafía de fondo. Si está utilizando la cubierta hacerlo en una nueva línea

-webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;

Fuente

2013-08-06 11:53:03 Rick

Las imágenes de fondo CSS no se muestran en el ipad

Respuesta

Cuestiones relacionadas