Usando CSS, ¿puedes aplicar una máscara de degradado para fundir el fondo sobre el texto?

Tengo una imagen de fondo fija de pantalla completa. Me gustaría que el texto en mi div desplazable se desvanezca en la parte superior, presumiblemente al aplicar una máscara de degradado al fondo en solo la parte superior del div. Me interesa que parezca que el texto se desvanece a medida que el usuario se desplaza hacia abajo, pero sigue teniendo un área grande de opacidad total para leer el texto.Usando CSS, ¿puedes aplicar una máscara de degradado para fundir el fondo sobre el texto?

Sé que hay opciones en el enmascaramiento webkit, pero no puedo encontrar una manera de desaparecer a través de fondo de la página sobre el texto contenía sólo aplicando el gradiente a una pequeña porción del elemento.

Espero que haya sido lo suficientemente descriptivo.

Gracias.

Fuente

2012-03-01 aviemet

leer esto y seguir totorial: http://webdesignerwall.com/tutorials/css-gradient-text-effect –

Gracias, lo vi antes de publicar esto, y funcionaría si solo quisiera desvanecerme en blanco, pero quiero desvanecerme en el fondo de la imagen de la página . – aviemet

Me he estado preguntando exactamente lo mismo. La solución es bastante simple. Aunque esta es, por supuesto, una característica bastante moderna de CSS3, por lo que estás atrapado en la compatibilidad del navegador.

Webkit puede hacerse cargo de esto con una sola línea de CSS:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

Esto se desvanecería el 10% inferior de cualquier elemento al que se aplica, sin usar siquiera tanto como una imagen. Puede agregar padding-bottom: 10% para asegurarse de que el contenido solo se desvanezca cuando haya más para desplazarse. Fuente: http://www.webkit.org/blog/181/css-masks/

Un Mozilla (Gecko) de retorno es un poco más complicado sin embargo: se puede utilizar its 'mask' feature, pero esto exige una imagen SVG. Se podría tratar de base64 embed that image into your stylesheet ...

Fuente

2012-03-12 16:24:10

+22

Obligatorio - http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies: P – BoltClock

Buen artículo, gracias por eso. –

¡Muchas gracias, eso era exactamente lo que necesitaba! –

Suponiendo que entiendo lo que quiere correctamente, podría duplicar los 300 mil píxeles superiores de su imagen y aplicarles un degradado de transparencia en Photoshop (haciendo que la parte superior sea completamente opaca y que la parte inferior sea completamente transparente).

Luego coloque esta imagen en un div o algún otro elemento fijo encima de la imagen fija pero con un alto z-index. El texto principal se desplazará sobre el fondo pero debajo de la superposición div y se desvanecerá a medida que la superposición se vuelva más opaca hacia la parte superior de la pantalla.

Fuente

2012-03-01 22:48:36 Gareth

Esa sería una buena solución, excepto que concedo una mayor prioridad al escalado de fondo de página completa al tamaño de la ventana. Tenía más la esperanza de aplicar una máscara que afectaría el elemento al que lo apliqué y todo lo que contiene, incluido el texto. – aviemet

Si ya está desvaneciendo a un color sólido, se puede utilizar un elemento de psudo:

.image-container { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
.image-container:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 55%; 
 
    bottom: 0; 
 
    background: -webkit-linear-gradient(transparent, #FFF) left repeat; 
 
    background: linear-gradient(transparent, #FFF) left repeat; 
 
}

<div class="image-container"> 
 
    <img src="https://photosharingsites.files.wordpress.com/2014/11/tiger-wild-cat-animal-winter-snow-wallpapers-free-backgrounds.jpg?w=474&h=344" alt="don't shoot me"> 
 
    </div>

Fuente

2015-10-02 15:57:00 ecolema

Usando CSS, ¿puedes aplicar una máscara de degradado para fundir el fondo sobre el texto?

Respuesta

Cuestiones relacionadas