css - online - ¿Cómo hacer que la imagen de fondo con gradiente lineal funcione en IE 11?

fondo degradado html5

Question

¿Alguna idea de cómo puedo hacer background-image linear-gradient para trabajar en IE 11?

El siguiente código funciona bien en IE 10 pero no funciona en IE 11.

background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);

Puedo hacer linear-gradient para trabajar en IE 6-9, 11 utilizando el siguiente filter pero la imagen de fondo no se muestra en este caso.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ffffff'', endColorstr=''#BEE38F'',GradientType=0 )

Estoy abierto a una ideas.

Actualización: Aquí está el código que tengo actualmente.

background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ffffff'', endColorstr=''#BEE38F'',GradientType=0 );

Answer 1

Enfrenté el mismo problema y además de hacer el filtro y el degradado lineal, también tuve que agregar el ancho en mi clase CSS. Una vez que configuré el ancho, pude ver mis estilos personalizados con degradado de fondo.

Answer 2

Enloquecedor, ¿no es así?

Antes de IE 11 ,

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=''#ffffff'', endColorstr=''#cccccc'');

Para IE 11:

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);

Así es, amigos, no solo tenemos que preocuparnos por respaldar las IEs antiguas, al parecer, ahora también tendremos que lidiar con las peculiaridades del IE MÁS NUEVO ...

Answer 3

Todas estas son soluciones estupendas si superpone un degradado lineal directamente sobre el texto. Pero si desea mostrarla sobre una imagen, no funciona en IE. No me pregunte por qué, pero no lo hace.

Me di cuenta de muchos recursos y finalmente encontré esta

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
    opacity:0.55;
  }
}

Envolví esto dentro de un selector de IE para 10+. Debe incluir la opacidad, ya que ayudará a combinar la superposición de degradado con el contenido.

¡Espero que esto ayude a alguien!

Answer 4

linear-gradient() es compatible sin prefijo en IE10 RTM y versiones posteriores, incluido IE11. Nunca necesita el prefijo -ms- ; solo las versiones preliminares de IE10 lo requerían y esas versiones ya ni siquiera se ejecutan . Solo estás desperdiciando espacio al incluir el prefijo en tu CSS.

Tenga en cuenta que la sintaxis direccional para linear-gradient() es diferente; lo que originalmente era top ahora se representa to bottom (vea esta publicación del blog , esta pregunta y la spec para obtener detalles):

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);