用图像的高度改变不透明度的等级

在CSS或JavaScript或jQuery中有没有一种方法可以改变单个图像的不透明度及其高度。喜欢让我说我有一个10px高的图像，我希望底部的1px是不可见的，所以不透明度将为0，倒数第二个像素为0.1，并逐渐增加到不透明度1为最上面的像素。这种渐变的不透明度应该反映出我想要实现的一种外观。我进行了研究和尝试，所有的研究都没有得到任何帮助。帮助将不胜感激。我标记的JavaScript和jQuery以及我不确定是否可以使用css3才能实现。用图像的高度改变不透明度的等级

来源

2012-12-11 Nick Div

你是谷歌吗？第一击：http://cow.neondragon.net/index.php/383-reflectionjs-demo –

@c_kick我在google上研究过它，我得到的只是一个隐藏图片底部与另一个div的代码。 –

是的，它是可能的，我发现这对another StackOverflow question：

该网站似乎为你做的工作，它看起来非常有前途。 http://www.colorzilla.com/gradient-editor/

来源

2012-12-11 08:53:18 Martin

有可能与简单的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)));

来源

2012-12-11 08:56:36 looper

假设你可以有图像高度从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()">

播放与高度值，以确认不透明度的变化。

来源

2012-12-11 09:06:15 stackoverflowery

非常感谢您的回答。我会尝试所有这些和为我工作的，我会将其标记为答案。谢谢。已经upvoted。 –

用图像的高度改变不透明度的等级

回答

相关问题