CSSで半透明効果を実現
Webページをデザインしたり、blogテンプレートを作ったりするときに、ある部分を透明にしたり半透明にしたりする効果がありますが、どうすればいいのでしょうか.
IEでは「filter」で透明度「opacity」を定義する必要がある.
Firefoxでは「opacity」を直接解析できるので、この効果を両方のブラウザでサポートするには、両方の設定を加える必要があります.
IEに対する設定:this.filters.alpha.opacity=50でFirefoxに対する設定:this.style.MozOpacity=0.5
以下のコードで直接画像定義を行うことができ、画像アドレスを変更するだけで効果が得られます.実は画像だけではなく、このCSSフィルターを実現することができます.ホームページもできます.
IEでは「filter」で透明度「opacity」を定義する必要がある.
Firefoxでは「opacity」を直接解析できるので、この効果を両方のブラウザでサポートするには、両方の設定を加える必要があります.
IEに対する設定:this.filters.alpha.opacity=50でFirefoxに対する設定:this.style.MozOpacity=0.5
以下のコードで直接画像定義を行うことができ、画像アドレスを変更するだけで効果が得られます.実は画像だけではなく、このCSSフィルターを実現することができます.ホームページもできます.
<img alt="Sunset" src="Sunset.jpg" width="250" height="60" style="opacity: 0.5;filter:alpha(opacity=50);cursor:pointer;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50"></img>