如何在元素的末尾淡出div的内容？

Question

我在页面上有一个带有背景渐变的div内容 现在向右，我想将div淡出背景：

我尝试过使用背景渐变，但这些都是在文本背后。基本上我需要的是foreground属性，我可以用另一个渐变填充。

如何在不使用canvas和JavaScript的情况下实现此目的？

Answer 1

我建议创建一个透明的.png图像，并通过创建一个具有绝对定位的类将其作为背景应用于文本顶部。

.transparent {background: url("xxxxxx.png") repeat-y 0 0 transparent; position:absolute; top:0; right:0; z-index:1;}

希望这有帮助。

Answer 2

绝对位于原始div顶部的单独DIV中的透明（rgba）渐变应该可以解决问题。

警告：绝对定位可能不可行，取决于您的布局。