Question

在CSS或javascript或jquery中是否有一种方法可以改变单个图像的不透明度及其高度。就像我说我有10px高的图像，我希望底部的1px是不可见的，因此不透明度将为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

是的，有可能，我在another StackOverflow question上找到了这个：

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

根据图像的高度更改不透明度

3 个答案: