ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 背景_html/css_WEB-ITnose
概要
CSS の背景プロパティは、HTML 要素の背景を定義するために使用されます。
background-color: 背景色を設定します
background-image: 背景画像を設定します
background-repeat: 背景画像を繰り返すかどうか、および繰り返す方法を設定します
background -position : 背景画像の位置を設定します
background-attachment: 背景画像が固定されているか、ページの残りの部分と一緒にスクロールするか
background: 省略表記の属性、関数は背景属性を設定することですステートメント
背景は、要素のコンテンツ、パディング、境界領域を埋め、要素の境界線の外側の端まで広がります (ただし、余白は含まれません)。枠線に透明部分(点線枠など)がある場合、その透明部分に背景色が透けて見えます。
Background 属性は、すべての主要なブラウザでサポートされています。
注: IE7 以前のバージョンは、「継承」値をサポートしていません。 IE8 では !DOCTYPE を定義する必要があります。 IE9は「継承」をサポートしています。
背景色background-color 属性は、要素の背景色を定義するために使用されます。
body {background-color: #b0c4de;}
CSS では、色の値は通常次の方法で定義されます:
Hex - 例: #ff0000
RGB - 例: rgb(255,0,0)
色の名前 - 例: 赤
デフォルト - 透明、透明を意味します。要素で背景色が指定されていない場合、背景は透明になります。
inherit は親要素から背景色を継承します。これには IE との互換性の問題があります。
background-image 属性は、要素の背景画像を定義するために使用されます。
デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。
body {background-image: url('paper.gif');}
ヒント: 背景色と背景画像は共存できます。背景画像が利用できない場合でも、ページに優れた視覚効果を得ることができるように、利用可能な背景色を設定してください。
body {background-image: url('paper.gif');background-color:#fff;}
属性値:
none - デフォルトでは背景画像なし
url('image path') - 画像のアクセス可能なパス。ネットワークアドレス、相対パスアドレス、絶対パスアドレスを使用できます
継承 - 親要素から継承します
背景画像を並べて表示する必要がある場合は、background-repeat 属性を使用できます。
body { background-image: url('gradient2.png'); background-repeat: repeat-x;}
属性値:
repeat により、デフォルトで画像が水平および垂直に並べて表示されます。
repeat-x とrepeat-y は、それぞれ背景画像を水平方向または垂直方向にのみ繰り返します。
no-repeat では、画像をどの方向にも並べて表示できません。
inherit 親要素から継承します。
background-position 属性は、背景画像の位置を制御するために使用され、通常、background-repeat: no-repeat; と組み合わせて使用されます。
そうですbackground-position プロパティの値を指定する方法はたくさんあります。まず、使用できるキーワードがいくつかあります: 上、下、左、右、中央。通常、これらのキーワードはペアで表示されますが、常にそうとは限りません。 100px などの長さの値を使用し、最後にパーセント値を使用することもできます。
画像配置キーワードは、その名前が示すように最も理解しやすく機能します。たとえば、top right は、要素のパディング領域の右上隅に画像を配置します。
仕様によれば、位置キーワードは、水平方向に対応するキーワードと、右上と垂直方向に対応するキーワードが 2 つ以下である限り、任意の順序で出現できます。
キーワードが 1 つだけ表示される場合、他のキーワードが中心とみなされます。
パーセンテージ値はより複雑な方法で表現されます。パーセンテージ値を使用して要素内の画像を中央に配置したいとします。
body { background-image: url('img_tree.png'); background-repeat: no-repeat; background-position: right top;}
画像が 0% 0% の場合、その左上隅は要素のパディング領域の左上隅に配置されます。画像の位置が 100% の場合、100% では、画像の右下隅が右マージンの右下隅に配置されます。
画像を水平方向に 2/3、垂直方向に 1/3 に配置します:
body { background-image: url('/eg_bg_03.gif'); background-repeat: no-repeat; background-position: 50% 50%;}
パーセンテージ値のみが指定された場合、指定された値が水平方向の値として使用され、垂直方向の値は 50% とみなされます。
長さの値は、要素のパディング領域の左上隅のオフセットを説明します。オフセット ポイントは画像の左上隅です。
たとえば、設定値が 50px 100px の場合、画像の左上隅は、要素のパディング領域の左上隅から右に 50 ピクセル、下に 100 ピクセルの位置になります。
背景固定background-attachment プロパティは、背景画像が固定されるか、ページの残りの部分と一緒にスクロールするかを設定します。
body { background-image: url('/eg_bg_03.gif'); background-repeat: no-repeat; background-position: 66% 33%;}
属性値:
scroll デフォルト。ページの残りの部分がスクロールすると、背景画像が移動します。
修正 ページの残りの部分がスクロールしても背景画像が移動しません。
inherit 親要素から継承します。
background プロパティは、1 つの宣言ですべての背景プロパティを設定します。
body { background: #00FF00 url('bgimage.gif') no-repeat fixed top;}
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。