Imagen de fondo transparente con degradado

Necesitamos tu ayuda para extender nuestros posts acerca de las ciencias de la computación.

Solución:

Tenga en cuenta que un degradado 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 concretamente y no background-coloro la totalidad background taquigrafía.

Esencialmente, lo que realmente estás tratando de hacer es superponer 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 más inferior, lo que significa que un degradado lo cubrirá perfectamente y funcionará incluso en el caso de una reserva.

Debido a que está incluyendo prefijos de proveedores, deberá hacer esto una vez por cada prefix, una vez para prefixless y otra para fallback (sin el degradado). Para evitar tener que repetir los otros valores, use las propiedades manuales¹ en vez de background taquigrafía:

#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);

Lamentablemente, esto no funciona correctamente en IE, ya que utiliza filter por el degradado, que siempre 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 fondos múltiples de CSS3, ya que solo puede hacer capas para todos los navegadores, pero eso es una compensación que tendrá que hacer. Si no necesita admitir versiones de IE que no implementen gradientes de CSS estandarizados, no tiene de qué preocuparse.

---

¹_{Técnicamente, el background-position y background-repeat Las declaraciones se aplican a ambas capas aquí porque los espacios se llenan repitiendo los valores en lugar de sujetarlos, pero dado que background-position es su valor inicial y background-repeat no importa para un degradado que cubra todo el elemento, no importa demasiado. Los detalles de cómo se manejan las declaraciones de fondo en capas se pueden encontrar aquí.}

Puedes usar Transparencia y degradados. Los degradados favorecen la transparencia. Puede usar esto, por ejemplo, al apilar varios 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);

El orden de la imagen y el degradado es muy CLAVE aquí, quiero dejar eso claro. El combo 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 degradado debe ser lo primero… para ir a la cima. La absoluta key aquí, sin embargo, es que el gradiente usa por lo menos 1 color RGBA… los colores deben ser transparentes para que la imagen se vea. (rgba(20,20,20,***0.5***)). poner el degradado primero en su css coloca el degradado en la parte superior de la imagen, por lo que cuanto menor sea la configuración alfa en su RGBA, más verá la imagen.

Ahora, por otro lado, si usa el orden inverso, el PNG debe tener propiedades transparentes, al igual que el degradado, para que el degradado brille. La imagen va en la parte superior, por lo que su PNG debe guardarse como 24 bits en Photoshop con áreas alfa… o 32 bits en fuegos artificiales con áreas alfa (o un gif, supongo… barf), para que pueda ver el gradiente debajo. En este caso, el gradiente puede usar HEX RGB o RGBA.

los key La diferencia aquí es el aspecto. La imagen será mucho más vibrante cuando esté en la parte superior. Cuando está debajo, tiene la capacidad de ajustar los valores RGBA en el navegador para obtener el efecto deseado… en lugar de editar y guardar de un lado a otro desde su software de edición de imágenes.

Espero que esto ayude, disculpe mi simplificación.

Sección de Reseñas y Valoraciones

Acuérdate de que puedes optar por la opción de valorar este escrito si chocaste tu obstáculo a tiempo.

---

---

Utiliza Nuestro Buscador