私の画像にアルファエフェクトを追加しようとしています。画像は丸い角の長方形になっています。私は、CSS3でアルファを変更する属性があることを知っていますが、私はまだCSS2であるw3c標準に準拠しようとしています。CSS2標準の画像ホバーのアルファ値を変更しますか？
申し訳ありません申し訳ありません申し訳ありません。私はCSS2を使用して画像上にカーソルを置いたときにアルファを変更しようとしていました。私は、100％のアルファには "背景画像"を使用し、50％のアルファにはimgタグを使用すると考えています。これを行うためのより良い方法はありますか？
画像が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 */
}
Webデベロッパーが透過効果を実装する典型的な方法は、部分的に透明なPNGファイルをバックグラウンドとして使用することです。あなたが期待するように動作しますPNGを使用して
div {
background: #FFF url(img/bg.png) repeat top left;
}
、しかし、不透明度が期待どおりに動作しません：
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％が透明になり、そのすべての子、テキストおよびすべてを含みます。不透明度の設定を実際に試して、期待どおりの結果が得られるようにする必要があります。
IE6のユーザーエクスペリエンスがやや悪い場合は、すべての最新のブラウザにアルファ透明画像を使用し、透明度がない（または単色の）画像をIE6に送信することも、 。少数のユーザーには少し悪いようですが、保守するコードはそれほど多くありません。
PNGとIE6に関するアドバイスは、実際にはPNG-24ファイルを扱う場合にのみ必要です。IE6は透明性の高いPNG-8ファイルをサポートしています。 –
ところで、不透明度：0.5; IE8で動作しますが、-ms-filterスタイルは必要ありません。ブラウザモード：IE8、ドキュメントモード：IE8標準。 –
私はフィルタと不透明度を使うことができますが、css3のみです。私はそれがw3cのために検証されて取得したいので、私はまだcss2を使用しようとしている – fei