CSSの背景の透明度。 CSSを使用した透明な背景やテキスト

CSS3の登場により、多くの点でレイアウト設計者の仕事現実にはJavaScriptを利用することなく、実際に柔軟にオブジェクトを設定することが可能です。背景の透明度を調整する必要があるとしましょう - CSSにはすぐにいくつかのオプションがあります。

背景は、一連の属性（背景画像、バックグラウンド位置、バックグラウンドサイズ、バックグラウンドリピート、バックグラウンドアタッチメント、バックグラウンド起点、バックグラウンドクリップ、バックグラウンドカラー）を含むことができる。それぞれをより詳細に分析してみましょう。

背景色の属性

CSSでは、16進コード、色名、またはRGBレコードを使用して、背景色をいくつかの方法で指定できます。 CSS3では、RGBレコードの代わりにRGBAオプションを使用することができました。

16進数のカラーコードが書かれていますグリッドの後のプロパティ：背景色：＃FFDAB9。このようなレコードの文字がペアでマッチすると、コードは通常はわずかに短縮されます。＃ccff00は＃cf0：

本文{背景色：＃cf0;}

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

本文{背景色：紫;}

RGBまたはRGBA録画の最後のバージョンでは色だけでなくCSSの背景も透明に設定しますが、IEではバージョン9以上でしか動作しません。他のブラウザは通常、透明性を持つオプションを認識します。 W3C規格では、より一般的なRGBの代わりにRGBAを使用することが好ましい。

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

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

背景画像属性

透明な背景の最も多くのブラウザ間のバージョンは、画像の利用率です。 CSS3では、複数の画像を指定することもできます。これはコンマで区切って行います。例：

body {背景画像：url（bg1.png）、url（bg2.png）}。

このメソッドはIE8をサポートします。背景としてのいくつかの画像は、ゴムのレイアウトに使用されます。主なことは、画像を使用するときにはCSSで背景色を設定することを忘れないことです。ユーザーは単に画像を読み込まないためです。

バックグラウンド位置属性

イメージを使用して背景を設定する場合CSSを使用すると、画面上の任意の場所に画像を配置できます。デフォルトでは、画像は左上隅にあります。この属性は、言語の指示（上、下、左、右）または数値（パーセンテージ、ピクセル、その他の測定単位）のいずれかを受け入れます。水平と垂直の2つの値を指定する必要があります。

本文{背景位置：右中央;} - この例では、背景がページの右側にあり、画像の下側と上側に同じ距離があります。

背景サイズ属性

CSSを使用して背景を伸ばしたり、そのサイズを縮小する。これを行うには、background-size属性を使用します。背景のサイズはピクセル単位またはパーセント単位で、その他の単位で指定できます。

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

バックグラウンド接続属性

この属性は、スクロール時の背景イメージの動作を設定します。したがって、3つの値を取ることができます（継承を考慮せずに、これはこの記事で紹介するすべての属性に共通しています）。

固定された - 背景の絵を静止させます。
スクロール - 背景は他の要素と一緒にスクロールします。
ローカル - スクロールに内容がある場合、背景の画像がスクロールします。コンテンツを超える背景がキャプチャされます。

使用例：

ボディ{背景固定固定}。

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

背景原点属性

この属性は、要素の位置を決定します。以前のブラウザでは接頭辞を使用する必要がありました。プロパティ自体には3つのパラメータがあります。

パディングボックス 前記フレームの厚さを考慮して前記エッジに対して前記背景を位置決めするステップと、
ボーダーボックス 境界線が背景と完全にまたは部分的に重なり合うことができる点で前の特性とは異なります。
コンテンツボックス コンテンツに貼り付けて画像を配置します。

複数の値が設定されている場合、ブラウザは独自の方法で反応することができます：FirefoxとOperaは最初のオプションのみを受け入れます。

バックグラウンドリピート属性

原則として、画像によって背景が設定されている場合は、水平または垂直に繰り返す必要があります。これは、background-repeat属性が使用されるものです。そのため、ブロック背景にはそのようなプロパティが含まれており、いくつかのパラメータの1つを持つことができます。

ノーリピート - イメージは単一のバージョンでページに表示されます。
繰り返す - 背景がx軸とy軸に沿って繰り返されます。
リピートx - 水平のみ。
リピートy - 垂直のみ。
スペース - 背景が繰り返されますが、スペースが塗りつぶされていないと、絵の間に空白が表示されます。
ラウンド - 画像全体を塗りつぶすことが不可能な場合は、画像が拡大縮小されます。

属性の使用例：

body {background-repeat：繰り返しを繰り返さない} - 同様に バックグラウンドリピート：repeat-y。

CSS3では、パラメータをカンマで区切って表示することで、複数の画像の値を設定することができます。

背景クリップ属性

この属性は、境界線の下の背景の動作を定義します（たとえば、破線のボックスの場合）。

パディングボックス - 背景はブロック内に厳密に表示されます。
ボーダーボックス - 画像が枠の下に来る。
コンテンツボックス - 背景の画像は、コンテンツの内部にのみ表示されます。

使用例：

body {background-clip：コンテンツボックス;}

ChromとSafariでは、-webkit-という接頭辞を使用する必要があります。

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

opacity属性を使用すると、透明度を設定できます背景 - CSSプロパティはすべてのブラウザで動作します。値は0.0〜1.0の間で設定されます。これにより、背景CSSの透明度を設定することができます整数値なし：0.3の代わりに.3を書くだけで十分です：

.block {background-image：url（img.png）;不透明度：.3;}

バックグラウンドの透明度を設定するには、9番目のバージョンの下のIEでもCSSが適切です。フィルタ属性を使用します。

.block {background-image：url（img.png）;フィルター：アルファ（不透明度= 30）;}

この場合、不透明度の値は不透明度属性は、遺伝的にRGBAを使用する透明度設定とは異なります。不透明度を使用する場合は、背景が透明になるだけでなく、ブロック内のすべての要素が透明になります。

使用統計を常に追跡します。CISおよび他のすべての国のブラウザ。すべての設計者にとって最大の問題は、古いバージョンのIEです。彼らは、CSS3を完全には使用できません。設計時には、ブラウザがCSSプロパティをサポートしているかどうかを確認する特別なサービスを使用することを忘れないでください。古いバージョンのブラウザをインストールできない場合は、オンラインで別のブラウザでサイトの動作を確認するサービスを見つけてください。