javascript - 画像の高さで不透明度を変える

Question

CSS、JavaScript、または jquery で、単一の画像の不透明度を高さとともに変更できる方法はありますか。たとえば、高さ 10px の画像があるとします。下の 1px を非表示にして不透明度を 0 にし、最後から 2 番目のピクセルを 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 questionでこれを見つけました:

このサイトはあなたのために仕事をしているようです、それは非常に有望に見えます. http://www.colorzilla.com/gradient-editor/