1

画像にアルファ効果を追加しようとしています。画像は角丸長方形です。CSS3 でアルファを変更する属性があることは知っていますが、まだ CSS2 である w3c 標準に準拠しようとしています。

申し訳ありませんが、以前に質問を正しく述べていませんでした。CSS2 を使用して画像にカーソルを合わせると、アルファを変更しようとしていました。100% アルファには「background-image」を使用し、50% アルファには img タグを使用することを考えています。これを行うより良い方法はありますか？

4

3 に答える 3

4

画像がPNGの場合、アルファを画像に直接含めることができます。もちろん、これには IE6 用のPNG Fixスクリプトが必要です。

それ以外の場合は、CSS を使用して透明度を設定できます。

編集: ホバーでのみ機能するように更新されました。これは IE6 では機能しないことに注意してください。

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}
于 2009-07-23T19:24:32.613 に答える
1

Web 開発者が透明効果を実装する一般的な方法は、部分的に透明な PNG ファイルを背景として使用することです。

div {
  background: #FFF url(img/bg.png) repeat top left;
}

png を使用すると期待どおりに動作しますが、不透明度は期待どおりに動作しません。

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

これにより、DIV は 50% 透明になり、すべての子、テキスト、およびすべてが含まれます。期待どおりの結果が得られるようにするには、不透明度の設定をいじる必要があります。

于 2009-07-23T19:51:09.597 に答える