背景CSSの透明、不透明なテキストを達成するためにどのように？背景CSSの透明、不透明なテキストを達成するためにどのように？

シェルは半透明層を作ったが、サブエレメントおよびフォントの他の要素を含む、半透明の背景を提供する前にも半透明になります。不透明度のこのプロパティは、後で使用するためにいくつかの結論を行うために、ここでの十分な理解ではありません。

背景透明、不透明なテキストソリューション：

絶対位置決め要素として追加された子要素は、要素の大きさなどの要素の絶対位置にマスクとして適用透光性を提供され、z屈折率は、半透明のバックグラウンドを達成するために、底部に設けられています。
新しいCSS3プロパティRGBAを使用してください。

透明の方法を達成：

不透明度のCSS3、例えば不透明度などの0~1の値：0.5、IE9標準ブラウザ上でサポート。フィルタ：アルファ（不透明度= 50）IE8以前のバージョンのような代替のフィルタ属性をサポートします。
RGBA（赤、緑、青、アルファ）のCSS3、このような背景色として0から1までのアルファ値：RGBA（255,255,255,0.5）。

以下に示すようにGoogleは、属性ブラウザの多様性をテストします。

<divのスタイル= "幅：150ピクセル、高さ100ピクセル;フロート：左;背景色：＃FF0000のを;"> <div>の没有设置透明度</ div> </ div> 
<divのスタイル= "幅：150ピクセル、高さ：100ピクセル;フロート：左;マージン左：10pxの、背景色：＃1 FF0000;不透明度：0.5; ">の<div>用不透明设置透明度</ div> </ div> 
<divのスタイル="幅：150ピクセル。高さ：100pxに;フロート：左;マージン左：10pxの;背景色：RGBA（255,0,0,0.5を）; "> <div>の用RGBA设置透明度</ div> </ div> 
<divのスタイル= "幅：150ピクセル、高さ：100pxに、フロート：左;マージン左：10pxの、背景色：＃1 FF0000;フィルター：アルファ（不透明度= 50）;"> <div>のIE专属フィルタ设置透明度</ div> < / DIV>

図1

不透明度のCSS3：

それは、図1、また、半透明となるブロックを含む第2のサブ要素を使用してテキストの不透明度プロパティから分かるように

注：要素の不透明度を設定 要素の子孫は、透明であろうと、すべて一緒に 、一般的にIE9と上記標準ブラウザと互換性のある画像又は全体的な不透明モジュールを調整するための、。

RGBAのCSS3：

図1から分かるように、ブロックは、RGBA透明な背景色、テキスト、およびサブ要素を実装することができる不透明含ま。

注： IE9 +、Firefox 3の+、クロム、SafariやOperaの10+サポート。

IEのフィルタ：アルファ（不透明度= X）：

のみIE6,7,8,9、IE10のバージョンで廃止されたサポートしています。

IE6,7では、IEのhaslayoutの（のような：*ズーム：1または*オーバーフロー：隠された）属性有効にする必要があり、フィルタを読ん：アルファを。
アルファ要素、親要素設定位置：静的（デフォルトプロパティ）、サブエレメントの位置の反対側に配置されている：IE6,7,8では、フィルタを設定し、相対、透明なサブ要素を可能にします。

完全な互換性：

	IE6	IE7	IE8	IE9	標準ブラウザ
RGBA	✘	✘	✘	✔	✔
フィルタ：アルファ	✔	✔	✔	✔	✘

IE6,7,8は、ブラウザのCSSハックをサポート：

/ *のみ* IE6,7,8をサポート/

@media \ 0screen \、画面\ 9 {...}

デモ：

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
< メタのcharset = "UTF-8" > 
< タイトル>背景透明、文字不透明</ タイトル> 
< スタイル> 
* { 
    パディング：0 ; 
    マージン：0 ; 
} 
体{ 
    背景色：＃ff7a74 。
    パディング：100ピクセル; 
} 
.TEST-不透明{ 
    パディング。25ピクセル; 
    地色：RGBA（255,255,255,0.5）; / * IE9、標準ブラウザ、IE6 IE7コア部分と（例えばQQブラウザなど）ブラウザが読み込まれます* / 
} 

/ *は、唯一IE6,7,8をサポート* / 
@media \ 0screen \、スクリーン\ 9。{ 
    .TEST、不透明度{ 
        背景色：#FFF ; 
        フィルター：アルファ（不透明度= 50）; 
        *ズーム：1 ; / * IE6,7特性をhaslayout活性化し、それアルファ読み取る* / 
    } 
    .TEST P-不透明度{ 
        位置：相対; / *セットの子要素は、サブ要素は、アルファ値を継承しないことができ、反対側に位置している* / 
    } 
} 
</ スタイル> 
< 身体> 

    < divのクラス= "テスト-不透明度" > 
        < P >透明な背景、不透明テキスト</ P > 
    </ DIV > 

</ ボディ> 
</ HTML >

オリジナルの背景CSSの透明、不透明なテキストを達成するためにどのように？

背景CSSの透明、不透明なテキストを達成するためにどのように？背景CSSの透明、不透明なテキストを達成するためにどのように？

おすすめ