Fade out text on image

问题

I know how to fade out a text on a plain colored background with a CSS transparent gradient. But how is it possible to fade out a text on an image background? Here is an example of what I'd like:

NB: I need a static effect just like the image (not a dynamic transition).

回答1:

CSS mask-image is probably what you are looking for:

div {
  background: #333;
  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>

Be sure to check browser compatibility (not so great, unfortunately)

回答2:

You can achieve it using background-clip: text; text-fill-color: transparent; test it on 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>

来源：https://stackoverflow.com/questions/46526369/fade-out-text-on-image