ホームページ > ウェブフロントエンド > CSSチュートリアル > CSSで背景レイヤーの透明度を設定する方法

CSSで背景レイヤーの透明度を設定する方法

小云云
リリース: 2017-11-27 09:47:53
オリジナル
2751 人が閲覧しました

CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズとスタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。 HTMLで特定のレイヤーの背景を透明にしたい場合はどう設定すればよいでしょうか? CSS を使用して透明レイヤー効果を設定する方法を共有しましょう。この方法はすべてのブラウザーと互換性があります。

以下は具体的なコードです (上記の効果は 0.8 に設定されています):

 .transparent{    
filter:alpha(opacity=50);    
-moz-opacity:0.5;    
-khtml-opacity: 0.5;    
 opacity: 0.5;    
 }
ログイン後にコピー

効果を見てみましょう:

CSSで背景レイヤーの透明度を設定する方法

以下は、上記の CSS コードに対する追加の手順です:

不透明度: 0.5; この属性は現在 CSS に透明度を設定するための標準プロパティがあります。 Firefox、Safari、Opera など、ほとんどのバージョンのブラウザで動作します。

filter:alpha(opacity=50); この属性は IE ブラウザのみをサポートします。

-moz-opacity:0.5; この属性は、Netscape Navigator などの一部の古い Mozilla ブラウザとの下位互換性を目的としています。

-khtml-opacity: 0.5; このプロパティは、現在の WebKit とは対照的に、依然として KTHML と呼ばれるレンダリング エンジンを使用する古いバージョンの Safari (1.x) との互換性のためのものです。

上記の内容はCSSで透明レイヤー効果を設定する方法ですので、皆様のお役に立てれば幸いです。

関連する推奨事項:

CSS で透明度を設定する方法

CSS3 の新しいコンテンツを使用して、例付きで透明な三角形を作成する方法を実現する

CCS の透明属性と背景の透明度継承メソッドの詳細な例

CSSの設定方法 div背景透明スタイルの解析例

背景色を透明に設定するチュートリアル例

以上がCSSで背景レイヤーの透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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