css - fondo - Fundir imagen a transparente como un degradado
imagen de fondo con degradado css (2)
Me gustaría tener una imagen (una imagen de fondo) para desvanecerse a transparente para que el contenido detrás de ella realmente se pueda ver (apenas, gracias a la transparencia).
Puedo lograrlo obviamente con una imagen PNG, pero necesito pedirle a mi diseñador gráfico que cambie la imagen cada vez que quiera cambiar el inicio => detener los puntos de transparencia (tal vez quiero más color o tal vez quiero menos color y más transparencia).
¿Hay alguna posibilidad de que pueda lograr el mismo efecto con CSS3? Intenté aplicar un degradado transparente en un jpg (y un png) pero no puedo ver a través de él a menos que el PNG ya tenga transparencia (y básicamente el degradado) ya hecho (lo que hace que el gradiente de CSS sea inútil).
¿Cualquier sugerencia? Estoy cavando mucho a través de la web, pero parece que no estoy usando la palabra clave correcta o tal vez no sea posible.
Actualización 1:
El código dice más que muchas palabras, me gustaría hacer algo como esto (pero la sintaxis es obviamente incorrecta):
background: linear-gradient(to bottom, rgba(url(''splash_bottom3.png''), 0.0), rgba(url(''splash_bottom3.png''), 1.0));
Si quieres esto:
Puedes hacerlo:
<html>
<style type=''text/css''>
div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
img {
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
</style>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
<img src=''https://i.imgur.com/sLa5gg2.jpg'' />
</body>
</html>
Si solo desea atenuar el color de fondo (blanco, en este caso), consulte el ejemplo de trabajo aquí:
.css para el contenedor de imagen div utiliza:
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#00ffffff'', endColorstr=''#ffffff'',GradientType=0 );