淡出图像上的文字 [英] Fade out text on image

问题描述

我知道如何用CSS透明渐变淡出纯色背景上的文本. 但是，如何淡出图像背景上的文本呢? 这是我想要的示例:

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

推荐答案

CSS mask-image可能是您正在寻找的东西:

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)

这篇关于淡出图像上的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！