Je sais comment fondu un texte sur un fond uni avec un dégradé CSS transparent. Mais comment est-il possible de faire disparaître un texte sur un fond d'image? Voici un exemple de ce que je voudrais:Fondu de texte sur l'image
NB: je besoin d'un effet statique comme l'image (et non une transition dynamique).
CSS mask-image est probablement ce que vous cherchez:
div {
background: url("https://placeimg.com/630/400/any/grayscale");
padding: 1em;
}
p {
color: white;
font-weight: bold;
-webkit-mask-image: linear-gradient(to bottom, white, transparent);
mask-image: linear-gradient(to bottom, white, transparent);
}<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget eros quis purus laoreet lobortis sit amet sit amet diam. Maecenas imperdiet nunc sed erat placerat, id ullamcorper mauris rhoncus. Phasellus non fringilla urna, eget elementum nulla.
</p>
</div>Assurez-vous de vérifier browser compatibility (pas si grand, malheureusement)
Merci! La compatibilité du navigateur semble meilleure qu'avec l'autre solution (background-clip + text-fill-color). Testé et fonctionne sur Chrome 53.0. – Patrick
Vous pouvez y parvenir en utilisant Background- clip: texte; text-fill-color: transparent; essai sur Chrome stable ...
.image-background{
background: url("https://www.noao.edu/image_gallery/images/d5/dumba.jpg");
background-repeat: no-repeat;
width:400px;
height:400px;
}
.text-container{
color:white;
font-size:20px;
padding:20px;
box-sizing:border-box;
background:linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
background: -webkit-linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}<div class="image-background">
<p class="text-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel felis congue, eleifend libero quis, ullamcorper metus. Etiam porttitor lectus elit, vitae interdum urna convallis id. Mauris et libero nec mi ornare pretium. Sed quis malesuada nibh, et volutpat augue. Cras non gravida nunc. Donec efficitur metus non dui tincidunt ultricies. Aliquam ut elementum dui, vitae sagittis nisi. Vestibulum aliquam interdum dui. Quisque gravida at justo id bibendum. Donec eleifend tortor mi, a rhoncus sapien consequat id. Etiam finibus blandit hendrerit. Donec et porttitor urna. Praesent bibendum aliquet volutpat.
</p>
</div>
@MasterYoda Un effet statique j'ai besoin, pas une transition. – Patrick
Peut-être que vous pourriez utiliser la même image de fond avec un dégradé fané assis sur le dessus du texte – Pete
@Patrick, d'accord, je peux voir que vous avez modifié votre question pour inclure cela si mal rétracter le drapeau pour vous. Cependant, ma prochaine question sera, qu'avez-vous essayé jusqu'à présent? –