如何在元素的末尾淡出一个div的内容？ [英] How to fade a div's content out at the end of the element?

问题描述

我有一个 div ，其中有一个背景渐变的页面上。

现在向右边，我想褪色 div ：

I have a div with stuff in it on a page with a background gradient.
Now towards the right, I would like to fade that div out to the background:

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

I have tried using background gradients, but those are behind the text. Basically what I would need was a foreground property which I could fill with another gradient.

如何实现不需要使用 canvas 和JavaScript？

How can I achieve this without needing to use canvas and JavaScript?

推荐答案

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

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

希望这有帮助。

这篇关于如何在元素的末尾淡出一个div的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！