Pregunta Atenuación lineal de div, contenido y borde (sólido en la parte superior a transparente en la parte inferior) [duplicado]


Posible duplicado:
¿Es posible graduar la opacidad de un elemento HTML? 

Estoy intentando que un div (y su borde y contenido) se desvanezcan en transparencia (es decir, sólido en la parte superior y transparente en la parte inferior) usando css.

¿Hay alguna forma de hacer esto?

He podido descolorar el fondo con lo siguiente:

.fade-to-nothing
{
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
    background-repeat: repeat-x;
}

pero no han podido encontrar una manera de hacerlo al contenido / borde del div también. quizás con algún tipo de anidación o una superposición?

EDITAR Aquí está lo que estaba tratando de hacer:

enter image description here


13
2017-10-08 10:23


origen


Respuestas:


Citando de mi respuesta aquí:

Mira esto demostración de trabajoe intenta agregar / eliminar contenido de #contents

HTML

<div id="container">
    <div id="contents">
        Some contents goes here
    </div>
    <div id="gradient">
    </div>
</div>

CSS

#container {
    position:relative;
}
#contents {
    background:red;
}
#gradient {
    position:absolute;
    z-index:2;
    right:0; bottom:0; left:0;
    height:200px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}​

Esto funcionará casi en cualquier navegador que admita la opacidad (incluido IE9), y aquí está la alternativa de IE8 "rgba" (no probada):

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

Para generar su propio degradado, visite Colorzilla.

La primera parada (0%) debe tener opacidad 0 ( rgba(255,255,255,0); ), luego alrededor del 70% - haga algunas pruebas para encontrar lo que es bueno para usted - agregue otra parada con opacidad 1 ( rgba(255,255,255,1); )


20
2017-10-08 10:30



Si conoce la altura puede usar ese conocimiento para su ventaja, siempre puede actualizarlo desde js, pero esto me parece un poco más simple que definir innumerables gradientes http://jsfiddle.net/6cXRZ/4/ puedes ajustar tus parámetros para esconder todo lo que quieras


1
2017-10-08 10:46