CSSの背景透明度。 CSSで背景を透明またはテキスト

CSS3のWebデザイナーの出現により、多くの点で作業がより簡単かつ論理的になってきている：結局、あなたが今、本当に柔軟にそれほど頻繁にはJavaScriptに頼ら、任意のオブジェクトをカスタマイズすることができます。 あなたが背景の透明度を調整する必要があるとしましょう - CSSはすぐにいくつかのオプションを提供しています。

属性の集合によって定義されるバックグラウンド（背景画像、背景位置 、背景サイズ、背景リピート、背景付着、背景起源、背景クリップ、背景色）、属性の下で別々に割り当てる又は結合することができるこれらの各々背景。 私たちは詳細にそれらのそれぞれを調べてみましょう。

背景色属性

CSSでは、 背景色が 進コード、色の名前またはRGB-エントリを使用して：いくつかの方法で設定することができます。 CSS3では、RGBAとRGB-記録オプションの代わりに使用することが可能となりました。

背景色：＃1 FFDAB9進カラーコードは、格子後のプロパティに記録されています。 このエントリでは文字が同じペアであれば、コードは通常、少しカットされます。＃ccff00は＃CF0のように書くことができます。

本体{背景色：＃1 CF0 ;}。

名前でも最もエキゾチックな色で、です。 例えば、標準の赤と白に加えて、あなたはNavajoWhite（#FFDEAD）またはHoneydew2（＃E0EEE0）を使用することができます。

本体{背景色：紫; }。

後者のオプションは、RGBまたはRGBAエントリは、色だけでなく、CSSの背景の透明度だけではないを指定することができますされていますが、この方法は、わずか9よりも古いIEのバージョンで動作します。 他のブラウザでは、透明性と、通常のバージョンを認識しています。 W3Cの規格によれば、代わりに、より一般的なRGBのまだRGBAを使用することが好ましいです。

RGBA背景の最後の値と、1（不透明）に0（透明）から不透明度を設定します。

いくつかの異常な値があります。 背景色は、HSLとHSLAを使用して設定することができます。 両方がCSS3に添加し、そして従ってIEバージョン9以上でサポートされていません。 唯一異なる形式の実施形態の同一のRGBまたはRGBA：色相（シェード - カラーホイール上の値は、度で与えられる）で飽和（彩度 - 0から100までのパーセンテージとして色強度、）、明度（明るさ - 輝度測定は、同様に飽和]をパラメータ）。

背景画像の属性

透明な背景の中で最もクロスブラウザのバージョン - これは画像の使用です。 CSS3では、あなたも、より多くの画像を設定することができ、これはコンマを介して行われます。 例：

{背景体画像： URL（bg1.png）、URL（bg2.png）}。

でも、IE8をサポートするこの方法です。 レイアウトで使用されるゴムの背景に複数の画像。 重要なのは、ユーザーが簡単に画像をアップロードすることができますように、任意の画像を使用して、CSSで背景色を設定することを忘れないでください。

背景位置属性

あなたは、背景ユニットを設定するために画像を使用する場合は、CSSを使用すると、画面上の任意の場所に画像を配置することができます。 デフォルトでは、画像は左上隅に位置しています。 属性は、口頭指示（上、下、左、右）、数値（注目画素と他の単位）のいずれかをとります。 このケースでは、水平方向と垂直方向の2つの値を、指定する必要があります。

本体{背景位置：右中央は ;} -この例では、パターンページ、同一の画像距離の頂部および底部の右側に配置されます。

バックグラウンド・サイズ属性

時にはCSSの背景を伸ばしたり、サイズを小さくすることが必要です。 これを行うには、属性背景サイズを使用し、バックグラウンドの大きさは、ピクセルまたはパーセント、および任意の他の単位で設定することができます。

使用するブラウザプレフィックスの以前のバージョンの背景を正しく表示するために：この属性では、いくつかの問題があります。 もちろん、現在のバージョンは、完全にこの属性をサポートしており、特定のプロパティの必要性が消えました。

背景添付ファイルの属性

スクロールしながらこの属性は、背景画像の動作を指定します。 だから、それは（継承を含まない、この記事で説明した属性のすべての合計）の3つの値をとることができます。

• 固定 -固定の背景に画像を作ります。
• スクロール -要素の残りの部分と背景のスクロールを、
• ローカル -スクロールがコンテンツを持っている場合は、背景の画像がスクロールされます。 フレームの内容を超えて背景が固定されています。

使用例：

本体{固定背景アタッチメント}。

現在、Firefoxは（地元の）最後のプロパティをサポートしていません。

背景起源属性

この属性は、位置決め要素を担当しています。 初期のブラウザでは、接頭辞を使用する必要があります。 プロパティ自体は、次の3つのパラメータがあります。

• アカウントにフレームの厚さをながらパディングボックスは 、エッジパターンに対して位置決めされます。
• 境界線ができる点で、以前の異なる境界ボックスの特性が完全にまたは部分的にパターンと重なります。
• コンテンツ・ボックスの位置決め画像は、その内容をpryavyazyvaya。

あなたが複数の値を指定すると、ブラウザは、独自の方法で反応することができます：FirefoxとOperaは最初のオプションだけを知覚します。

背景リピート属性

背景画像が指定されている場合、原則として、それは水平方向または垂直方向に繰り返されなければなりません。 このため、属性背景リピートを使用。 このように、ブロックの背景には、そのようなプロパティが含まれているCSSは、いくつかのいずれかのパラメータを持つことができます。

• 何のリピート -画像は、単一のバージョンでページに表示されません。
• リピート -背景がxおよびyで繰り返されます。
• リピート-X -水平方向にのみ。
• リピート-Y -垂直方向にのみ。
• スペース -背景を繰り返したが、スペースは絵の間に埋めることは不可能である場合は何も表示されています。
• ラウンド -それは全体の画像の領域全体を埋めていない場合、画像は、スケーリングされます。

属性の例：

本体{背景リピート：NO-繰り返し反復} -類似背景リピート：リピート-Y。

コンマで区切られたパラメータをリストするときCSS3に複数の画像の値を指定することができます。

背景クリップ属性

この属性は、（例えば、点線枠の場合）の境界の下にバックグラウンドの動作を定義します。

• パディングボックス -ブロックの内部に表示される背景。
• ボーダーボックス -画像は、フレームワークの下に来ます。
• コンテンツボックス -背景に画像はイメージコンテンツ内に表示されます。

使用例：

本体{背景クリップ：たContentボックス;}。

CHROMとSafariは-webkit-接頭辞が必要です。

不透明度の属性とフィルタ

不透明度の属性を使用すると、背景の透明度を設定することができます - CSSプロパティは、すべてのブラウザで動作します。 値は0.0から1.0の包括範囲内に設定されています。 このケースでは、CSSの背景の透明度を設定することができます 代わりに、0.3のない整数値が0.3を書くには十分ではありません。

.block {背景画像：URL（ img.png）。 不透明度：0.3;}。

背景の不透明度を設定するには、CSSはフィルタ属性を使用し、でも、第九のバージョン以下IEに適しています：

.block {背景画像：URL（ img.png）。 フィルタ：アルファ（不透明度= 30）}。

不透明度を使用してバックグラウンドだけでなく、ユニット内のすべての要素だけでなく、明らかになった場合：この場合には、不透明度値を不透明度がRGBAの継承を介して、異なる透明度の設定属性こと0〜100注の間に設定されます。

必ずCISブラウザおよび他のすべての国のためのあなたの使用状況の統計を監視します。 すべてのDTPの最大の問題 - IEの古いバージョンでは、彼らはあなたが最大限のCSS3を使用することはできません。 レイアウトでは、あなたのブラウザは任意のCSSプロパティをサポートしているかどうかをチェックする特別なサービスを使用することを忘れないでください。 あなたはブラウザの古いバージョンをインストールすることができない場合は、オンラインの複数のブラウザでサイトの作業をチェックするサービスを見つけます。