淡出图像上的文字

Question

我知道如何使用CSS透明渐变淡出纯色背景上的文本。 但是如何淡出图像背景上的文字呢？ 以下是我喜欢的一个例子：

注意：我需要像图像一样的静态效果（不是动态过渡）。

Answer 1

CSS mask-image可能就是你要找的东西：

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

务必检查browser compatibility（不幸的是，不太好）

Answer 2

你可以使用background-clip：text来实现它; text-fill-color：透明; 在Chrome稳定版上测试它......

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;