1

私は現在、2つの画像があり、一方が他方の上に配置されているプロジェクトに取り組んでおり、マウスが画像の上を移動すると下の画像がより透けて見えるようにしたいと思います。ピクセル単位で必要ですピクセル レベルでは、それぞれ同じ背景を共有する 1px x 1px の div を X x Y で作成しようとしましたが、背景をその位置でオフセットして、上部の画像ピクセルがそれぞれ 1px div になるようにして、不透明度を変更できるようにしましたマウスオーバー時の各 div の。これを試してみると、ブラウザが非常に多くの div で停止しました。

これを行う方法はありますか（フラッシュではありません）、ブラウザが停止することなくスムーズに見えるように、すべてのブラウザで十分に速く動作しますか？

4

1 に答える 1

0

最も適切なのは Canvas 要素です。ただし、すべてのブラウザでサポートされているわけではありません。実際のブラウザのみです。(Internet Explorer は、バージョン 9 でのみ Canvas のサポートを追加しました)。

画像の上に絶対配置されたキャンバスを使用すると、誰かがキャンバスのアルファ値を変更して、下にある画像を「輝かせる」ことができます。

本番コードではない例は次のとおりです (テスト済みで、FF7 で動作します): http://jsbin.com/uxizav/edit#preview

于 2011-10-29T13:14:30.313 に答える