Xiaonei.com に背景画像を追加するための一般的なコード CSS コード_エクスペリエンス交換

シリアル番号 中国語説明マーク 構文 備考
1 背景色 {background-color: 数値}
2 背景画像 {background-image: url(URL)|none}
3 背景リピート {background-repeat:継承| no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景位置 {background-position:value|top|bottom|left|右 | 中央}
6 バックスタイル {背景: 背景色 | 背景画像 | 背景リピート | 背景添付 | 背景位置}

１．背景色: background-color

構文: {background-color:numeric}
説明: パラメータ値は color 属性と同じです
注: HTML では、背景を追加する必要がありますオブジェクト 色を変更する方法は 1 つだけです。まず表を作成し、その表に背景色を設定してから、オブジェクトをセルに配置します。これはさらに面倒で、コード量が多くなるだけでなく、テーブルのサイズや配置にも手間がかかります。今では、CSS を使用して直接実行するのが簡単になり、オブジェクトの範囲は非常に広く、テキストの一部、または単なる単語や文字にすることができます。
例: テキストに背景色を追加します。テキストに背景色を追加します。
表の背景色: style="background-color:red"

2.背景画像:background-image

構文: {background-image: url(URL)|none}
説明: URL は、背景画像のストレージ パスです。背景画像の保存パスに「none」を指定した場合は何も表示されません。
例: テキストに背景画像を追加します。 .imgbgstyle {background-image: url(logo.gif)}
3.背景の繰り返し:background-repeat

構文: {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
機能: 背景画像の繰り返しは、背景画像のタイリングを制御します。つまり、背景の位置の制御と組み合わせることで、背景画像を Web ページ上のどこかに個別に表示できます。
注: パラメータ値の範囲:
・継承の継承
・no-repeat 繰り返されないタイル背景画像
・repeat
・repeat-x は画像を水平方向のみにタイル化します
・repeat-y は画像を垂直方向のみにタイル化します
注: 指定しない場合背景 画像繰り返し属性の場合、ブラウザのデフォルトでは、背景画像が水平方向と垂直方向の両方に並べて表示されます。
4．背景固定:background-attachment

構文: {background-attachment:fixed|scroll}
説明: パラメーター値の範囲
・固定: Web ページがスクロールされるとき、背景画像は相対的なものになります。ブラウザ ウィンドウ 一般的に、固定
・スクロール: Web ページがスクロールされると、背景画像もブラウザ ウィンドウに合わせて一緒にスクロールします。
注: 背景画像の固定は、背景画像がブラウザ ウィンドウのスクロールに合わせてスクロールするかどうかを制御します。ウェブページ。背景画像固定属性を設定しない場合、ブラウザのデフォルトの背景画像は Web ページのスクロールに合わせてスクロールします。派手すぎる背景画像がスクロール時に閲覧者の視力を損なうことを防ぐために、ブラウザ ウィンドウにバンドルする必要がある背景画像とテキスト コンテンツをバンドル解除できます。
例: 背景パターンがテキストとともに「スクロール」しないようにする CSS
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5.背景の位置決め:background-position

構文: {background-position:numeric|top|bottom|left|right|center}
機能:背景の位置決めは、背景画像の表示位置を制御するために使用されます。ウェブページ。
説明: パラメータ値の範囲
・長さの単位を持つ数値パラメータ
・top: 前景オブジェクトを基準とした上揃え
・bottom: 前景オブジェクトを基準とした下揃え
・left: 相対前景オブジェクトに対して左揃え
・right: 前景オブジェクトに対して右揃え
・center: 前景オブジェクトに対して中央揃え
・比例関係
キーワードは次のように説明されます。
>左上 = 左 上 = 0% 0 %
上 = 上 中央 = 中央 上 = 50% 0%
右上 = 右上 = 100% 0%
左 = 左 中央 = 左中央 = 0% 50%
中央 = 中央 中央 = 50% 50%
右 = 右 中央 = 中央右 = 100% 50%
左下 = 左 下 = 0% 100%
下 = 下center = 中央 下 = 50% 100%
右下 = 右下 = 100% 100%
注: パラメータの中心が別のパラメータの前で使用されている場合は、水平方向の中央揃えを意味します。別のパラメータの後では、垂直方向のセンタリングを意味します。
6. 背景スタイル: 背景

構文: {background:背景色|背景画像|背景繰り返し|背景添付|背景位置}
機能: 背景属性は、より鮮明な背景です。関係属性。以下にバックグラウンド宣言をいくつか示します。
例:
BODY { バックグラウンド: ホワイト url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { バックグラウンド: #7fffd4 }
P { 背景: url(../backgrounds/pawn.png) #f0f8ff 固定 }
TABLE { 背景: #0c0 url(leaves.jpg) 右下繰り返しなし }
注: 値が次の場合と異なる場合指定すると、その初期値が受け入れられます。たとえば、上記の最初の 3 つのルールでは、背景位置プロパティは 0% 0% に設定されます。ユーザーのスタイルシートとの競合を避けるために、背景と色を一緒に指定する必要があります。