lineal desvanecen div, el contenido y la frontera (sólido en la parte superior a transparente en la parte inferior)

Duplicar posibles:
Is it possible to graduate the opacity of an HTML element?lineal desvanecen div, el contenido y la frontera (sólido en la parte superior a transparente en la parte inferior)

que estoy tratando de conseguir un div (y su frontera y contenido) para fundirse en transparencia (es decir, sólido en la parte superior y transparente en la parte inferior) usando css.

¿Hay alguna manera de hacerlo?

he sido capaz de desaparecer el fondo fuera 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 sido capaces de encontrar una manera de hacerlo con el contenido/frontera de la división de escala. quizás con algún tipo de anidación o una superposición?

EDITAR aquí está lo que yo estaba tratando de hacer:

enter image description here

Fuente

2012-10-08 Luke McGregor

¿Tiene un fondo monocolor en el contenedor? Relacionado: http://stackoverflow.com/questions/12664132/is-it-possible-to-graduate-the-opacity-of-an-html-element/12670548#12670548 – Giona

sí, el fondo es un color sólido tanto para el div y lo que hay debajo –

¿Puedes publicar una captura de pantalla de lo que tienes y una imagen de lo que estás tratando de lograr? Encuentro tu formulación muy difícil de adivinar. – xception

Citando my answer here:

Marque esta working demo, y tratar de añadir/eliminar el 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 funciona casi en cualquier navegador que soporte la opacidad (incluyendo IE9), y aquí está la "RGBA" IE8 de reserva (no probado):

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

para generar su propio gradiente, 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);).

Fuente

2012-10-08 10:30:57 Giona

que se ve perfecto gracias –

Funciona con imágenes, también. Vea mi fork de su violín: http://jsfiddle.net/yw9v7zm5/ ... y no tuve que usar su imagen de URI de datos. –

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/ Puede ajustar los parámetros para ocultarlos como

Fuente

2012-10-08 10:46:33 xception

lineal desvanecen div, el contenido y la frontera (sólido en la parte superior a transparente en la parte inferior)

Respuesta

Cuestiones relacionadas