div css 背景背景-CSSチュートリアル-php.cn

背景属性 - 背景は CSS の中核となる属性です。それをよく理解しておく必要があります。この記事では、背景に関連するすべてのプロパティ (background-attachment も含む) について詳しく説明し、今後の CSS3 でどのようになるか、および新しく追加された背景プロパティを紹介します。

CSS2 で背景プロパティを使用する

レビュー

css2 には、背景関連のプロパティが 5 つあります。

background-color: 背景を完全に埋める色

background-repeat: 背景画像を繰り返すかどうかを決定するフラット

background-attachment: 背景画像がページと一緒にスクロールするかどうかを決定します

これらの属性は、単純な属性、background で記述することができます。背景は、パディングやボーダーを含む要素のコンテンツ部分の背景を担当しますが、マージンは担当しないことに注意してください。これは、Firefox、Safari、Opera、および IE8 での処理方法です。ただし、IE7 とクソ IE6 には枠線が含まれておらず、その違いは以下の画像例のとおりです。

IE7 および IE6 では、背景に境界線が含まれません。

基本属性

背景色属性

background-color は、塗りつぶされた背景の色を記述するために使用されます。塗りつぶしの色を定義するには複数の方法があります。次のメソッドは同等です:

background-color: blue;

background-color: rgb(0, 0, 255);

background-color: #0000ff ;

background-color を透明に設定して、その下の要素を表示することもできます。

背景画像プロパティ

background-image を使用すると、独自の画像を背景として使用できます。背景色と密接に関係しています。画像が要素の背景全体を並べて表示できるほど大きくない場合、空の部分には、background-color で設定された色が表示されます。使い方は非常に簡単ですが、画像とCSSファイルの位置関係を覚えておく必要があります:

背景繰り返し属性

デフォルトでは、画像は要素全体を覆うまで水平方向と垂直方向に繰り返されます。しかし、場合によっては、一方向に繰り返したい場合もあります。次に、次のように設定します。

background-repeat:repeat; /* デフォルト値。画像は全方向に繰り返し展開されます。 */

background-repeat: no-repeat; /* 繰り返しません。画像は 1 つだけ表示されます*/

background-repeat:repeat-x; /*水平方向のリピートスプレッド*/

background-repeat:repeat-y; /*垂直方向のリピートスプレッド*/

background-repeat:inherit;親要素のbackground-repeat属性値を使用します。 */

背景位置属性

background-position属性は、要素内の背景画像の位置を制御します。マスタリングの鍵は、背景の位置が画像の左上隅であることです。

以下は、background-position プロパティのデモンストレーションです。もちろん、background-repeat 属性を no-repeat に設定します。

/* 例 1: デフォルト */

background-position: 0 0; /* つまり、要素の左上隅。 */

背景。 -position: 75px 0;

/* 例 3: 左に移動します。 */

background-position: -75px 0;

/* 例 4: 下に移動します。 */

background-position: 0 100px ;

背背景画像の位置を自由に設定できます

背景の位置属性は、ピクセル (PX) で正確に使用されるのではなく、キーワード、パーセンテージ、その他の単位でも機能します。

キーワードは非常に一般的に使用されており、水平方向では次のようになります:

left

center

right

垂直方向では:

top

center

bottom

前と同じように使用します:

background-position: 右上;

パーセンテージは同じ方法で使用されます:

background-position: 100% 50%;

効果は次のようになります:

スマイリーフェイスの画像は次のとおりです:要素の右側の中央に設定します。

Backgroundattachment プロパティ

background-attachment プロパティは、ユーザーがページをスクロールしたときに背景画像に何が起こるかを定義します。可能な値は 3 つあります: スクロール、固定、および継承。これは、background-attachment 属性を完全に理解するためのものです。まず、ユーザーがページをスクロールしたときに Web ページに何が起こるかを理解する必要があります。値を固定に設定すると、ページを下にスクロールすると、コンテンツは下にスクロールしますが、背景は一緒にスクロールしません。その結果、コンテンツが上にスクロールしているように見えます。もちろん、値をスクロールに設定すると、背景がスクロールします。

以下の例を見てみましょう:

background-position: 0 0;

background-repeat: no-repeat;

background-attachment:スクロール ;

ページを下にスクロールすると、背景画像が消えるまで上にスクロールします

別の修正例を見てください:

background -position 0 100% 内に移動します。例は次のとおりです:

background-position: 0 100%;

background-repeat: no-repeat;

背景-添付ファイル: 修正されました ;

要素の境界からはみ出したため、画像の一部が消えました

単純な背景属性

これらの属性設定は、次のような形式で属性に記述できます。 :

たとえば、

background-color:transparent;

background-position: 50% 0 ;

background-attachment:scroll;

background-repeat:repeat-y;

... のように書くことができます:

background:transparent url(image .jpg) 50% 0scrollrepeat-y;

すべての値を設定する必要はありません。記述しない場合はデフォルト値が使用されます。したがって、上記は次のように書くこともできます:

background: url(image.jpg) 50% 0repeat-y;

「型破りな」背景の適用

美化要素の設定に加えて、背景属性にはその他、非日常的な用途に幅広くお使いいただけます。

擬似列

float 属性のレイアウトを使用する場合、2 つの列の長さを確実に同じにすることが難しい場合があります。 2 つの要素のサイズが異なる場合、背景画像が乱雑になります。疑似列はシンプルなソリューションであり、最初に A List Apart で公開されました。

簡単に言うと、親要素に全体の背景画像を設定し、画像内の縦の行の位置が実際の分割位置と正確に一致するようにします。

テキストの置換

ウェブ上のフォントの選択肢は限られています。一般的な方法はテキストの画像を作成することですが、これだけを行うのは検索エンジンにとって好ましくありません。これを行う一般的な方法は、background 属性を使用してテキストの画像を表示し、その上のテキストを非表示にすることです。これは検索エンジンやスクリーンリーダーに優しく、ブラウザーでクールなフォントを表示できます。

たとえば、テキスト情報は次のように記述されます:

テキスト画像が幅 200 ピクセル、高さ 75 ピクセルの場合、次の CSS コードを使用します。画像全体を表します :

h3.blogroll {

width: 200px;

height: 75px; /* 画像全体を表示します */

background:url(blogroll-text.jpg) 0 0 no-repeat ; /* 画像を設定します */

text-indent: -9999px; /* テキストを非表示にするためにテキストを 9999 ピクセル左に移動します*/

}

箇条書きが簡単になります

順序なしリストオプションのデフォルトのスタイルは表示されない可能性がありますとても良い。次に、背景画像を使用して見栄えを良くします。

ul {

list-style: none; */

}

ul li {

padding-left: / *コンテンツを内部に保持し、背景表示用のスペースを残しておきます。 */

background: url(bulletpoint.jpg) 0 0 no-repeat;

}

CSS3 の背景プロパティ

CSS3 の背景には多くの点があります。プロパティで。最も明らかなのは、複数の背景画像のサポートの追加と、4 つの新しい属性と既存の属性の変更です。

複数の背景画像

CSS3 では、要素に複数の背景画像を使用できます。コードは CSS2 と同じで、複数の画像をカンマで区切ることができます。最初に宣言された画像は、次のように要素の上部に表示されます:

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

新しい属性 1: 背景クリップ

この属性は、境界線と背景の属性に関する元の質問に戻ります。

background-clip プロパティを使用すると、背景を表示する場所を制御できます:

background-clip: border-box;

背景は、現在と同じように境界線内に表示されます。 .

background-clip:padding-box;

背景は枠線ではなくパディング内に表示される点はIE6と同じです。

background-clip: content-box;

背景はコンテンツ内にのみ表示され、境界線やパディングは表示されません。

background-clip: no-clip;

デフォルト値、border-box と同じ。

新しい属性 2: 背景の原点

この属性は、background-position 属性と一緒に使用する必要があります。

background-origin: border-box;

background-position が border から計算されるように、background-position の計算方法を変更できます。

background-origin:padding-box;

background-position はパディングから計算されます。

background-origin: content-box;

background-position はコンテンツから開始して計算されます。

background-clip プロパティとbackground-origin プロパティの適用例については、CSS3.info を参照してください。

新しいプロパティ 3: 背景サイズ

background-size プロパティは、背景画像のサイズを再定義するために使用されます。可能な値は次のとおりです:

background-size: contains;

要素のサイズに合わせて画像を縮小します。

background-size: cover;

要素のサイズに合わせて画像を拡大します。

background-size: 100px 100px;

サイズを再定義します。

background-size: 50% 100%;

パーセンテージで再定義します。

例を見てみましょう: CSS 3 仕様

新しい属性 4: 背景ブレーク

CSS 3 では、要素を複数の部分に分割できます (たとえば、インライン要素のスパンは複数の行を占有することができます) 。 background-break プロパティは、複数のセクションで背景画像を表示する方法を制御します。

可能な値は次のとおりです:

Background-break:Continuous; デフォルト値

Background-break:bounding-box;: 2 つの部分間の値を考慮に入れます。

Background-break: each-box;: 各セクションを個別に検討します。

背景色属性の変更

CSS3 のbackground-color 属性は、前景色と背景色をサポートしています:background-color: green / blue;

この例では、デフォルトの色は緑です。が表示できない場合は青色を使用してください。

背景の繰り返しプロパティの変更

CSS 2 では、境界線を越えることにより画像が部分的に消える可能性があることをまだ覚えていますか? CSS 3 には、この問題を解決するために 2 つの新しい値が追加されました:

space: 繰り返される画像間の間隔を設定します。

round: 繰り返し画像は要素を正確に埋めるように自動的にサイズ変更されます。

background-repeat: スペースの例: CSS 3 仕様。

Background Attachment プロパティの変更

background-attachment に新しい値が追加されました: local..これは、スクロール可能な要素 (overflow:scroll; 属性を持つなど) に関連付けられます。背景添付値がスクロールの場合、背景画像はコンテンツと一緒にスクロールしません。今回は、background-attachment:local を使用して、画像をコンテンツと一緒にスクロールできるようになりました

。