CSSを使った背景透明・文字不透明効果まとめ

透明スタイルと不透明スタイルの使用は、プロジェクト開発プロセスの非常に早い段階で一般的になりました。今や誰もがよく知っているエフェクトですが、画像だけでなく様々な場所でCSSを使うことで様々なブラウザへの互換性設定を実現することができます。背景画像にテキストの紹介を入れるためによく使用されます。背景画像が透明でテキストが不透明であるという効果が必要です。次の章では、CSS を使用して透明な背景画像と不透明なテキストの効果を実現する方法について説明します。

透明な背景と不透明なテキストの効果

1.

CSSを使用して透明な背景画像と不透明なテキストを実現する2つの方法

方法1 (すりガラス効果): 背景画像 + 疑似クラス + flite :blur(3px)

方法2(半透明効果):背景画像+位置決め+background:rgba(255,255,255,0.3)

CSS透明な背景画像と不透明なテキスト効果を実現する2つの方法

2.実装 背景は透明でテキストは不透明です (すべてのブラウザーと互換性があります)

FF/Chrome などの新しいブラウザーでは、css 属性の background-color の rgba を使用して、テキストはそのままで背景を透明にすることが簡単に実現できます不透明。 IE6/7/8 ブラウザは rgba をサポートしておらず、IE の専用フィルター filter:Alpha を使用することでしか実現できません。ただし、この書き方では文字も透明になるため、 の子ノード内でのみ使用できます。透明なコンテナ (テキスト ノードを除く)。親要素の透明度フィルタを継承しないように、position:相対を設定します。

3.

背景の透明度とテキストの不透明度を実現する Css メソッド

透明度を実現する Css メソッドには、通常、次の 3 つの方法があります。 以下は、不透明度を 80% に記述する方法です

opacity:x の値。 css3のx 不透明度など0から1まで:0.8

css3 rgba(red,green,blue,alpha)、rgba(255,255,255,0.8)などの0から1までのアルファ値

IE専用フィルター filter:Alpha ( opacity=x)、値 :0.8; /* Firefox で要素の透明度を設定します

filter: alpha(opacity=80); /* つまり、透明度を設定するにはフィルターを使用します

;ラベル上のテキストと画像も半透明になります。 5.

CSS3 不透明度を実装するための完全なコード

値の説明:

1、| は浮動小数点数と単位識別子で構成される長さの値です。負の値は指定できません。デフォルト値は 1 です。不透明度の値が 1 の場合、要素は完全に不透明になり、値が 0 の場合、要素は完全に透明になり、見えなくなります。

2. Inherit は継承、つまり親要素の不透明度を継承することを意味します。

3. IE ブラウザの場合、互換性を保つためにそのプライベート属性フィルターを使用できます: filter: alpha (alpha=value);。

関連する質問と回答

1. 背景を透明にし、コンテンツを不透明にするための CSS

2. キャンバスの背景は不透明ですが、内部の一部の要素は透明です (中空効果と同様)

3. CSSの背景の透明度を探して、テキストを不透明にする方法

[関連する推奨事項] 1. php中国語Webサイトの無料ビデオチュートリアル:

「php.cn Dugu Jiijian (2) - CSSビデオチュートリアル」 "

2. php中国語サイトの関連記事:

CSSの半透明設定まとめ

以上がCSSを使った背景透明・文字不透明効果まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。