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

Is there a way in CSS or javascript or jquery that opacity of a single image can be changed along with its height. Like lets say I have an image 10px tall, I want the bottom 1px to be invisible so opacity would be 0, and second last pixel would be 0.1, and gradually increasing to opacity 1 for the uppermost pixel. This kind of gradual opacity should give a reflection kind of appearance which is what I am trying to achieve. I have researched and tried and all my research has not proven of any help. Help would be appreciated. I am tagging javascript and jquery as well as I am not sure if it can be achieved using css3 only.

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

3 个解决方案

#1

It's possible with simple css:

这可以用简单的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)));

#2

Assume that you can have image height from 0 to 1000 px: then

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

Play with height values to confirm opacity change.

使用高度值进行游戏以确认不透明度变化。

#3

Yes it's possible, I found this on another * question :

是的,有可能,我在另一个*问题上找到了这个:

This site seems to do the job for you, it looks very promising. http://www.colorzilla.com/gradient-editor/

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

#1