web-dev-qa-db-fra.com

À l'aide de CSS, pouvez-vous appliquer un masque de dégradé pour se fondre au fond sur le texte?

J'ai une image de fond fixe en plein écran. Je voudrais que le texte de ma div à défilement disparaisse en haut, probablement en appliquant un masque de dégradé à l’arrière-plan, dans la partie supérieure de la div uniquement. Ce qui m'intéresse, c'est que le texte ait l'air de s'effacer au fur et à mesure que l'utilisateur fait défiler l'écran, tout en conservant une grande surface d'opacité totale pour la lecture du texte.

Je sais qu'il existe des options de masquage dans le kit Web, mais je ne trouve aucun moyen de passer en fondu au fond de la page sur le texte contenu en appliquant uniquement le dégradé à une petite partie de l'élément.

Voici une image du résultat souhaité:

 

cssgradientmasking
37
aviemet

Je me demandais exactement la même chose. La solution est en fait assez simple. Bien qu’il s’agisse bien entendu d’une fonctionnalité assez moderne, vous êtes donc tenu à la compatibilité du navigateur.

Webkit peut s’occuper de cela avec une seule ligne 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 nouvelle méthode standard consiste à utiliser mask-image et linear-gradient en utilisant sa nouvelle syntaxe. Voir caniuse.com pour mask-image et linear-gradient .)

Cela effacerait les 10% inférieurs de l’élément auquel il est appliqué sans même utiliser une image. Vous pouvez ajouter padding-bottom: 50% pour vous assurer que le contenu est atténué uniquement lorsqu'il y a plus à faire défiler.

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

Un repli de Mozilla (Gecko) est cependant un peu plus compliqué: vous pouvez utiliser sa fonction de "masque" , mais cela nécessite une image SVG. Vous pouvez essayer base64 incorporer cette image dans votre feuille de style ... Utilisez mask-image dans Firefox maintenant.

62
Adrian van Vliet

Si vous passez à une couleur unie, vous pouvez utiliser un pseudo-élément:

.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>

11
ecolema

Voici comment vous pouvez le faire en utilisant les propriétés modernes mask-image et linear-gradient. Malheureusement, en 2018, ils ne sont pas complètement pris en charge par tous les navigateurs. (Voir caniuse.com pour mask-image et linear-gradient .)

Dans cet extrait de code, j'ai attribué à l'élément html un fond dégradé orange et jaune, afin de prouver que cette méthode utilise une transparence réelle et utilise l'élément situé en dessous comme arrière-plan.

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>

6
Flimm

En supposant que je comprenne bien ce que vous voulez, vous pouvez dupliquer les 300 premiers pixels de votre image et leur appliquer un dégradé de transparence dans Photoshop (rendant le haut complètement opaque et le bas complètement transparent).

Ensuite, placez cette image dans un div ou un autre élément fixé en haut de l’image fixe mais avec un z-index élevé. Le texte principal défilerait ensuite sur votre arrière-plan, mais sous la superposition div et disparaîtrait progressivement au fur et à mesure que la superposition deviendrait plus opaque vers le haut de l'écran.

1
Gareth