javascript - 随图像的高度改变不透明度

Question

在 CSS 或 javascript 或 jquery 中有没有一种方法可以改变单个图像的不透明度及其高度。就像假设我有一个 10 像素高的图像，我希望底部 1 像素不可见，因此不透明度为 0，倒数第二个像素为 0.1，并逐渐增加到最上面像素的不透明度 1。这种逐渐的不透明度应该给出一种反射的外观，这就是我想要实现的。我已经研究并尝试过，我所有的研究都没有证明有任何帮助。帮助将不胜感激。我正在标记 javascript 和 jquery，但我不确定它是否可以仅使用 css3 来实现。

Answer 1

使用简单的 css 是可能的：

background-image: url(...), -moz-linear-gradient(top,  rbga(255,255,255,1),  rbga(255,255,255,0));
background-image: url(...), -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));

Answer 2

假设您可以将图像高度从 0 到 1000 像素：然后

<script src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<script>
function img_height()
{
    height = $('#idd').height();

    $('#idd').css('opacity',height/1000); // change 1000 to max size of image
}

</script>

<img src='http://eoimages.gsfc.nasa.gov/images/imagerecords/0/885/modis_wonderglobe_lrg.jpg' height="821px" id="idd" style='opacity:0' onload="img_height()">

使用高度值来确认不透明度的变化。

Answer 3

是的，有可能，我在另一个 StackOverflow 问题上找到了这个：

这个网站似乎可以为您完成这项工作，它看起来很有希望。 http://www.colorzilla.com/gradient-editor/