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

letras degradadas online

Question

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.

Sé que hay opciones de enmascaramiento en el kit web, pero no puedo encontrar una forma de desvanecerme hasta el fondo de la página sobre el texto contenido, solo aplicando el degradado a una pequeña porción del elemento.

Aquí hay una imagen del resultado deseado:

Answer 1

A continuación, le mostramos cómo puede hacerlo usando propiedades modernas de mask-image y linear-gradient . Lamentablemente, en 2018, no son completamente compatibles en todos los navegadores. (Ver caniuse.com para mask-image y linear-gradient ).

En este fragmento de código, le he dado al elemento html un fondo degradado anaranjado y amarillo, para probar que este método usa transparencia real y usa el elemento debajo de él como fondo.

html {
  background: linear-gradient(to right, orange, yellow, orange);
  height: 100%;
}
div {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

<div>
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
</div>

Answer 2

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

Webkit puede encargarse 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)))

(La nueva forma estandarizada de hacerlo es usar mask-image y linear-gradient usando su nueva sintaxis. Consulte caniuse.com para mask-image y linear-gradient ).

Esto se desvanecería en el 10% inferior de cualquier elemento al que se aplique, sin usar siquiera una imagen. Puede agregar padding-bottom: 50% para asegurarse de que el contenido solo se desvanezca cuando haya más para desplazarse.

Fuente: http://www.webkit.org/blog/181/css-masks/

Sin embargo, una alternativa de Mozilla (Gecko) es un poco más complicada: puede usar su función ''máscara'' , pero esto exige una imagen SVG. Podría intentar insertar64 esa imagen en su hoja de estilo ... Use mask-image en Firefox ahora.

Answer 3

Si te estás desvaneciendo a un color sólido, puedes usar un elemento 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>

Answer 4

Suponiendo que entiendo lo que quiere correctamente, podría duplicar los 300 000 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).

A continuación, coloque esta imagen en un div o en algún otro elemento fijo en la parte superior 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 desaparecerá a medida que la superposición se haga más opaca hacia la parte superior de la pantalla.