CSS2規格の画像ホバーのためのアルファを変更しますか？

StackOverflow https://stackoverflow.com/questions/1173914

  •  19-09-2019
  •  | 
  •  

質問

私は私のイメージのアルファ効果を追加しようとしています。画像は、丸い角の矩形状に形成されています。私は、CSS3でアルファを変更する属性がある知っているが、私はまだCSS2であるW3C規格に準拠するようにしようとしています。

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

役に立ちましたか？

解決

画像は PNG である場合は、

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

そうしないと、透明度を設定するために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ファイルを使用して実装します。

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％透明になり、そのすべての子を含め、テキストおよびすべて。あなたは本当にあなたが期待どおりに結果を得ることを確認するために不透明度の設定で遊んでする必要があります。

さらに簡単に修正、あなたはIE6のために、わずかに悪化したユーザーエクスペリエンスを立つことができる場合は、IE6にすべての最新ブラウザのためのアルファ透明画像を使用し、透明性（あるいは単に1色）なしで画像を送信することです。これらの少数のユーザーのために少しより悪く見えますが、維持するためにはるかに少ないコードである。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top