Foros del Web » Creando para Internet » CSS »

Como renderizar multiples backgrounds con inline css en IE7,IE8, IE9 ?

Estas en el tema de Como renderizar multiples backgrounds con inline css en IE7,IE8, IE9 ? en el foro de CSS en Foros del Web. Hola! Basicamente necesito renderizar una imagen como background y un color como overlay en el mismo div, por lo tanto queda la imagen con una ...
  #1 (permalink)  
Antiguo 04/11/2013, 11:12
Khinrot
Invitado
 
Mensajes: n/a
Puntos:
Pregunta Como renderizar multiples backgrounds con inline css en IE7,IE8, IE9 ?

Hola!

Basicamente necesito renderizar una imagen como background y un color como overlay en el mismo div, por lo tanto queda la imagen con una capa del color que se escoja, algo como esto:

.green{
background: url(overlay-green.png), url(lalala.jpg);
background-size: contain;
}

la cosa es que necesito hacerlo con inline no con una clase, algo asi:

Cita:
<div id="test" style="background: url(overlay-green.png), url(lalala.jpg);">
</div>
y evidentemente que esto funcione en IE7, IE8 y IE9, de momento solo he podido conseguir que se muestre solo uno, o bien la imagen o bien el color, necesito alguna manera de filtrar esto , y que minimo se muestren los dos en IE9, de alguna manera solo mostrar el color en versiones anteriores.

Esto es lo que tengo, no soy un desarrollador frontend, asi que esto me esta causando corticircuitos mentales.

Cita:
<div class="library-item green" style="background: rgb(0,0,255); background: -ms-linear-gradient(top, rgba(0,0,255,0.5),rgba(0,0,255,0.5)),url(lalala.jp g); background: -moz-linear-gradient(top, rgba(0,0,255,0.5) 100%, rgba(0,0,255,0.5 100%)),url(lalala.jpg); background: -webkit-linear-gradient(top, rgba(0,0,255,0.5),rgba(0,0,255,0.5)),url(lalala.jp g); background: linear-gradient(to bottom, rgba(0,0,255,0.5) 100%, rgba(0,0,255,0.5) 100%),url(lalala.jpg); background-size: contain;">
</div>
asi que.... finalmente ... alguna idea de como conseguir que esto funcione en el "bendito IE" ?

De antemano muchas gracias!! :)
  #2 (permalink)  
Antiguo 04/11/2013, 16:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Como renderizar multiples backgrounds con inline css en IE7,IE8, IE9 ?

Pues en IE8 e inferiores no te va a funcionar background-size, simplemente porque no lo soportan. Luego los fondos múltiples funcionan en IE9 sin problemas a priori. Y los degradados no te van a funcionar siquiera en IE9, por la misma cuestión.

Por otro lado, no sé si lo que quieres hacer es lo que explicas, fondos múltiples y un color, que sólo tendrías que especificar:

Código CSS:
Ver original
  1. background-image: url(), url(), url();
  2. background-size: cover;
  3. background-color: red;

O si lo que necesitas hace son degradados, porque lo que explicas no tiene que ver con el código que pone. Pero en ese caso en realidad sería la misma cosa. Teniendo en cuenta lo del soporte claro.

Etiquetas: background, color, ie9, inline, multiples, renderizar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:14.