HTML CSS如何为元素添加渐变透明度[重复]答案

【问题标题】：HTML CSS how to add gradual transparency to element [duplicate]HTML CSS如何为元素添加渐变透明度[重复]
【发布时间】：2015-06-29 20:07:53
【问题描述】：

我有一个列表项，并且在 javascript 事件期间，我想将其更改为看起来像是消失在地平线上（即：不是在谈论动画它 - 更像是一个过滤器，也许？）。

是否有一种 html/css/javascript 方法来添加渐进式透明度 - 并动态执行？该元素已经有一个背景，我不想改变已经存在的颜色或渐变（或者如果我这样做，我必须得到原始的然后调整它？） - 只是让元素淡出比如说，从上到下？

到目前为止，我所看到的一切似乎都想将背景图像调整为渐变色或更改整个元素的不透明度。

...对不起，如果这真的很愚蠢，我只是在放屁。

* 更新 * 以下非常接近我想要的，除了我不知道背景是什么的情况下我无法弄清楚如何去做（或者，我只是将它设置为其他东西）。

【问题讨论】：

你尝试过使用不透明度 + 高度和 CSS3 过渡吗？
就目前而言，这个问题尚不清楚，或者可能被标记为过于宽泛。您有一个“列表项”，很高兴知道，但仅凭这些信息我们无法为您提供帮助。我们需要您的 HTML。还有你所说的“消失在地平线”是什么意思：越来越小，移动到不同的位置，淡出，还是什么？
@DerekS - 谢谢！看起来很有希望。

【解决方案1】：

JavaScript 对每个元素都有一个“不透明度”属性。

element.style.opacity

这是一个 JSfiddle 示例： https://jsfiddle.net/7hurnjok/

请记住，您必须先设置元素的不透明度，否则它将不起作用。

【讨论】：

这会改变整个元素的不透明度。如果是这样的话，我想要逐渐不透明。
@Mostfoolish，这在 HTML、CSS 或 JavaScript 中是不可能的。我很确定有一种方法可以使用 .png 文件来做到这一点。也许如果你在部分透明的 .png 文件上制作了一个序列，你可以用 javascript 为它们制作动画。
实际上，您可以在画布中进行很多编辑和像素操作。这很困难，但如果你真的想花时间去做，你可以。