40

¿Por qué following example muestra la imagen en Firefox 4, pero no en Chrome 10 e Internet Explorer 8?¿Por qué un estilo de "imagen de fondo" en línea no funciona en Chrome 10 e Internet Explorer 8?

HTML:

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> 

CSS:

div { 
    width: 60px; 
    height: 60px; 
    border: 1px solid black; 
} 

¿Alguna idea para soluciones?

+0

el ejemplo no funciona en Chrome 12.0.712.0 cualquiera –

+6

Just in case: 'url (http://www.mypicx.com/uploadimg/1312875436_05012011_2.png)' Nota: no hay apóstrofes - la función 'url()' no los necesita. –

+0

Genius :) ¡Eliminé los apóstrofes y eso resolvió el problema! –

Respuesta

73

Como cs millas mencionó: sólo tiene que quitar los apóstrofes en el url():

<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div> 

Demo here

+2

Los apóstrofes no hacen ninguna diferencia aquí. Algún otro problema está en juego aquí. Probablemente la respuesta de @ lpd (¿no se permite el hotlinking?). La única razón por la que funciona la demostración en su respuesta es porque está utilizando 'http: // i54.tinypic.com/4zuxif.jpg' en lugar del' 'http: //www.mypicx.com/uploadimg/1312875436_05012011_2.png' roto. – thirtydot

+2

es extraño ... La especificación W3 los enumera como opcional y se requiere en los casos en que la url contiene ciertos caracteres. http://www.w3.org/TR/CSS21/syndata.html#uri – plainjimbo

+0

esto resolvió el problema para mí también ... cuando definí el estilo en línea. Funciona bien con 'en un archivo .css. background-image: url (Img/load.gif); si esto no es una razón válida, entonces me gustaría saber más de los expertos. – NoviceProgrammer

4

Chrome 11 escupe lo siguiente en su depurador:

[error] GET http://www.mypicx.com/images/logo.jpg indefinido (indefinido)

Parece que el servicio de alojamiento es el uso de algún sistema dinámico cobarde que impide estos navegadores pueden buscarlo correctamente. (En cambio, trata de recuperar la imagen base predeterminada, que es problemáticamente un jpeg.) ¿Podría simplemente cargar otra copia de la imagen en otro lugar? Esperaría que fuera la solución más fácil en una larga milla.

Editar: ver lo que sucede en Chrome cuando se coloca la imagen utilizando <img> etiquetas normales;)

2

se está trabajando en mi versión del navegador Google Chrome 11.0.696.60

creé una página sencilla con ningún otro artículos sólo etiquetas básicas y ningún archivo css separada y se puso una imagen

esto es lo que la configuración <div id="placeholder" style="width: 60px; height: 60px; border: 1px solid black; background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png')"></div> i poner un id por si acaso hubo una etiqueta hiddne Identificación y funciona

3

u debe especificar el ancho y la altura también

<section class="bg-solid-light slideContainer strut-slide-0" style="background-image: url(https://accounts.icharts.net/stage/icharts-images/chartbook-images/Chart1457601371484.png); background-repeat: no-repeat;width: 100%;height: 100%;" > 
Cuestiones relacionadas