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

王林
リリース: 2020-11-26 17:49:07
オリジナル
4741 人が閲覧しました

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

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

この記事の環境:

  • windows10、css3

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

属性の紹介:

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

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

文法:

opacity: value|inherit;
ログイン後にコピー

属性値:

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

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

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

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


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

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

関連する推奨事項:

CSS チュートリアル

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!