css - oscurecer - Imagen de fondo transparente con un degradado
opacidad imagen de fondo css (5)
Hoy estaba diseñando un fondo PNG transparente que solo se sentaría en la parte superior izquierda de un div, y el resto de la div mantendría un fondo degradado para todas las áreas transparentes del PNG, y el resto de la div en sí.
Podría ser mejor explicarlo a través del código que pensé podría funcionar:
#mydiv .isawesome {
/* Basic color for old browsers, and a small image that sits in the top left corner of the div */
background: #B1B8BD url(''../images/sidebar_angle.png'') 0 0 no-repeat;
/* The gradient I would like to have applied to the whole div, behind the PNG mentioned above */
background: -moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ADB2B6), color-stop(100%,#ABAEB3));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#ADB2B6'', endColorstr=''#ABAEB3'',GradientType=0 );
}
Lo que he encontrado es que la mayoría de los navegadores eligen uno u otro, la mayoría eligen el gradiente desde su archivo CSS más abajo.
Sé que algunos de los que están por aquí dirán "simplemente aplique el gradiente al PNG que está haciendo", pero eso no es ideal porque la división mantendrá una altura dinámica, a veces siendo muy corta, a veces muy alta. Sé que este gradiente no es esencial, pero pensé que valdría la pena preguntarles a todos qué pensaron.
¿Es posible tener una imagen de fondo, manteniendo el resto del fondo como un degradado?
El orden de la imagen y el gradiente es muy CLAVE aquí, quiero aclararlo. La combinación de degradado / imagen funciona mejor así ...
background: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url(''../images/plus.png'');
background-image también funcionará ...
background-image: -webkit-gradient(linear, top, rgba(0,0,0,0.5), rgba(200,20,200,0.5)), url(''../images/plus.png'');
el gradiente debe venir primero ... para llegar a la cima Sin embargo, la clave absoluta aquí es que el degradado utiliza al menos 1 color RGBA ... los colores deben ser transparentes para que la imagen se vea. ( rgba(20,20,20,***0.5***) ). colocar el gradiente en primer lugar en ti css coloca el gradiente en la parte superior de la imagen, por lo que cuanto menor sea la configuración alfa en tus RGBA, más verás la imagen.
Ahora, por otro lado, si utiliza el orden inverso, el PNG debe tener propiedades transparentes, al igual que el gradiente, para que el degradado brille. La imagen se coloca en la parte superior, por lo que su PNG debe guardarse como un bit de 24 bits en photoshop con áreas alfa ... o de 32 bits en fuegos artificiales con áreas alfa (o un gif, supongo ... barf), para que pueda ver el gradiente por debajo. En este caso el gradiente puede usar HEX RGB o RGBA.
La diferencia clave aquí es el aspecto. La imagen será mucho más vibrante cuando esté en la parte superior. Cuando está debajo, tiene la capacidad de sintonizar los valores RGBA en el navegador para obtener el efecto deseado ... en lugar de editar y guardar desde su software de edición de imágenes.
Espero que esto ayude, disculpe mi simplificación excesiva.
Esto es posible usando la sintaxis de fondo múltiple:
.example3 {
background-image: url(../images/plus.png), -moz-linear-gradient(top, #cbe3ba, #a6cc8b);
background-image: url(../images/plus.png), -webkit-gradient(linear, left top, left bottom, from(#cbe3ba), to(#a6cc8b));
}
Leí sobre esto en Aquí hay una solución .
Las imágenes transparentes aún no son un estándar CSS, pero son compatibles con la mayoría de los navegadores modernos. Sin embargo, esto es parte de la recomendación W3C CSS3. La implementación varía de un cliente a otro, por lo que tendrá que usar más de una sintaxis para la compatibilidad entre navegadores.
Puedes usar transparencias y degradados . Los gradientes soportan la transparencia. Puede usar esto, por ejemplo, al apilar múltiples fondos, para crear efectos de desvanecimiento en las imágenes de fondo.
background: linear-gradient(to right, rgba(255,255,255,0) 20%,
rgba(255,255,255,1)), url(http://foo.com/image.jpg);
Tenga en cuenta que un gradiente de CSS es en realidad un valor de imagen , no un valor de color como algunos podrían esperar. Por lo tanto, corresponde a background-image específicamente, y no background-color , o la abreviatura de background completa.
Esencialmente, lo que realmente estás tratando de hacer es combinar dos imágenes de fondo: una imagen de mapa de bits sobre un degradado. Para hacer esto, especifique ambos en la misma declaración, separándolos con una coma. Especifique primero la imagen, seguida del degradado. Si especifica un color de fondo, ese color siempre se pintará debajo de la imagen que se encuentra en la parte inferior, lo que significa que un degradado lo cubrirá perfectamente y funcionará incluso en el caso de un retroceso.
Debido a que está incluyendo los prefijos de los proveedores, tendrá que hacer esto una vez para cada prefijo, una vez para sin prefijo y una vez para respaldo (sin el gradiente). Para evitar tener que repetir los otros valores, use las propiedades de mano larga 1 en lugar de la abreviatura del background :
#mydiv .isawesome {
background-color: #B1B8BD;
background-position: 0 0;
background-repeat: no-repeat;
/* Fallback */
background-image: url(''../images/sidebar_angle.png'');
/* CSS gradients */
background-image: url(''../images/sidebar_angle.png''),
-moz-linear-gradient(top, #ADB2B6 0%, #ABAEB3 100%);
background-image: url(''../images/sidebar_angle.png''),
-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ADB2B6), color-stop(100%, #ABAEB3));
background-image: url(''../images/sidebar_angle.png''),
linear-gradient(to bottom, #ADB2B6, #ABAEB3);
/* IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=''#ADB2B6'', endColorstr=''#ABAEB3'', GradientType=0);
}
Desafortunadamente, esto no funciona correctamente en IE, ya que utiliza un filter para el gradiente, que siempre se pinta sobre el fondo.
Para solucionar el problema de IE, puede colocar el filter y la imagen de fondo en elementos separados. Sin embargo, eso obviaría el poder de los múltiples fondos de CSS3, ya que solo puedes hacer capas para todos los navegadores, pero esa es una compensación que tendrás que hacer. Si no necesita admitir versiones de IE que no implementan gradientes de CSS estandarizados, no tiene nada de qué preocuparse.
1 Técnicamente, las declaraciones de background-position background-repeat aplican a ambas capas aquí porque los espacios se rellenan repitiendo los valores en lugar de restringidos, pero dado que background-position es su valor inicial y background-repeat no importa para una gradiente que cubre todo el elemento, no importa demasiado. Los detalles de cómo se manejan las declaraciones de fondo en capas se pueden encontrar here .