我知道如何使用 CSS 透明渐变淡出纯色背景上的文本。
但是如何才能淡出图像背景上的文本呢？
这是我想要的一个例子：
注意：我需要像图像一样的静态效果（而不是动态过渡）。
CSS mask-image可能是您正在寻找的：
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>
请务必检查浏览器兼容性 https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image#Browser_compatibility（不幸的是，不太好）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
