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

Question

我div在带有背景渐变的页面上有一个东西。
现在向右，我想将其淡出div到背景中：

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

如何在不需要使用canvasJavaScript 的情况下实现这一点？

Answer 1

I suggest creating a transparent .png image and applying it as a background on top of the div with text by creating a class with absolute positioning.

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

Hope this helps.

Answer 2

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

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