Difuminar la imagen a transparente como un degradado
Me gustaría tener una imagen (una imagen de fondo) que se desvanezca a transparente para que el contenido detrás de ella pueda verse (apenas, gracias a la transparencia).
Lo puedo lograr obviamente con una imagen PNG, pero necesito pedirle a mi diseñador gráfico que cambie la imagen cada vez que quiera cambiar los puntos de transparencia start => stop (tal vez quiera más color o tal vez quiera menos color y más transparencia).
¿Hay alguna posibilidad de que pueda lograr el mismo efecto con CSS3? Me intenté aplicar un degradado a 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 degradado css sea inútil).
Alguna sugerencia? Estoy cavando duro a través de la web, pero parece que no estoy usando la palabra clave correcta o tal vez no es posible.
Actualizar 1:
El código dice más que muchas palabras, me gustaría hacer algo como esto (pero la sintaxis es obviamente incorrecto):
background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));
2 answers
Si quieres esto:
Puedes hacer esto:
<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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-27 13:24:44
Si solo desea desvanecerse al color de fondo (blanco, en este caso) vea 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 );
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-06 04:00:24