元のリンク: CSS の背景: 知っておくべきことすべて
翻訳リンク: CSS バックグラウンド ガイド
転載する場合は著作権とリンクを保持してください
背景は CSS の重要な部分であり、知っておく必要がある CSS の基本知識の 1 つです。この記事では、background-attachment などの属性を含む css 背景 (background) の基本的な使い方を説明するとともに、背景 (background) に関する一般的なテクニックと css3 (4 つを含む) の背景 (background) についても紹介します。新しい背景プロパティ)。
css2の背景
概要
CSS2 には、次の 5 つの主要な背景プロパティがあります。
背景色: 背景を塗りつぶす色を指定します。
背景画像: 背景としての参照画像。
背景位置: 要素の背景画像の位置を指定します。
background-repeat: 背景画像を繰り返すかどうかを決定します。
背景添付: 背景画像がページとともにスクロールするかどうかを決定します。
これらのプロパティはすべて、背景という 1 つの短縮プロパティに結合できます。注意すべき重要な点の 1 つは、背景がパディングや境界線を含む要素のコンテンツ領域のすべてを占めるが、要素のマージンは含まれないということです。 Firefox、Safari、Opera、IE8 では正常に動作しますが、IE6 と IE7 では背景に枠線が含まれません。
基本特性
背景色
背景色プロパティは、背景を単色で塗りつぶします。この色を指定するにはさまざまな方法がありますが、次の方法はすべて同じ結果をもたらします。
背景色: 青;
背景色: rgb(0, 0, 255);
背景色: #0000ff;
背景色を透明に設定すると、その下の要素が見えるようになります。
背景画像
背景画像属性を使用すると、背景に表示する画像を指定できます。背景色と組み合わせて使用できるため、画像が繰り返されない場合、画像で覆われていない領域は背景色で塗りつぶされます。コードは非常に単純です。パスはスタイル シートに対する相対パスであることに注意してください。そのため、次のコードでは、画像とスタイル シートが同じディレクトリにあります。
背景画像: url(image.jpg);
ただし、画像がimagesというサブディレクトリにある場合は、次のようにする必要があります。
背景画像: url(images/image.jpg);
TangbanTomato: ../ を使用して、background-image: url(../images/image.jpg) のように上位レベルのディレクトリを指定します。これは、画像が、スタイルシート。少し複雑ですが、誰もがすでに知っているはずなので、詳しくは説明しません。すべての著作権はFront End Observationによって所有されており、転載する場合はリンクを保持してください。