CSSで画像の半透明効果を実現する方法

画像の半透明性を実現する Css メソッド: [style="-moz-opacity:0.5";] などの不透明度属性を使用して設定できます。 opacity 属性は要素の不透明度レベルを設定するために使用され、構文は [opacity:value|inherit;] です。

この記事の環境:

• windows10、css3

• すべてのブランドのコンピュータに適用可能

属性の紹介:

opacity 属性は、要素の不透明度レベルを設定します。

(学習ビデオ共有: css ビデオ チュートリアル)

文法:

opacity: value|inherit;

属性値:

• #value 不透明度を指定します。 0.0 (完全に透明) から 1.0 (完全に不透明) まで。

• inherit opacity 属性の値は、親要素から継承する必要があります。

実装コードは次のとおりです。

このエフェクトは IE ブラウザと Mozilla ブラウザの両方で機能します。コードは次のとおりです。

<img alt="powerbookg4.jpg" src="archives/images/powerbookg4.jpg" width="250" height="60" style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50">

IE の場合、透明度の「不透明度」は「フィルター」を通じて定義する必要があり、「不透明度」は Mozilla で直接解析できるため、この効果を両方のブラウザーでサポートしたい場合は、両方の設定を追加する必要があります。

IE の設定: this.filters.alpha.opacity=50、Mozilla の設定: this.style.MozOpacity=0.5。

関連する推奨事項:

CSS チュートリアル

以上がCSSで画像の半透明効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。