CSSの背景のスタイル（バックグラウンド）
映像素材のニーズをクリックするか、私に私的な手紙に問い合わせて、コメント
CSSは、背景色や背景画像を追加することができるだけでなく、画像設定を行なうこと。
| 背景色 | 背景色 |
|---|---|
| 背景画像 | 背景画像アドレス |
| 背景リピート | タイルかどうか |
| 背景位置 | 背景位置 |
| 背景アタッチメント | 固定またはスクロール背景 |
| 共同書いた背景（複合属性） | |
| 背景：背景画像アドレス背景タイル背景背景スクロール位置の背景色 |
背景画像（画像）
構文：
background-image : none | url (url)
パラメータ：
なし：背景なし（デフォルト）
URL：指定した背景画像の絶対または相対アドレスを使用して
背景画像のプロパティを使用すると、バックグラウンドで表示する画像を指定することができ（それだけCSS3マルチ背景缶）と背景色と組み合わせて使用することができます。絵は言葉で繰り返されていない場合は、場所をカバーすることはできません画像は背景色で塗りつぶされます。あなたは、背景画像のタイリングを持っている場合は、背景色をカバーします。
ヒント：私たちは、絵アドレス、引用符なしのURLの後ろに背景を提唱します。
背景タイル（リピート）
構文：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
パラメータ：
繰り返し：縦方向および横方向（デフォルト）に背景画像タイル
NO-リピート：背景画像がタイル張りでない
リピートX：横に背景画像タイル
リピート-Y：垂直背景画像タイル
背景画像を設定する場合、デフォルトの画像は水平方向及び垂直方向のタイル要素に分散します。
リピートX：背景画像タイルを横方向に
繰り返し-Y：背景画像タイルを垂直
背景画像を設定する場合、デフォルトの画像は水平方向及び垂直方向のタイル要素に分散します。
背景位置（ポジション）
構文：
background-position : length || length
background-position : position || position
パラメータ：
長さ：パーセント|浮動小数点数によって長さの値、及びユニット識別子。長さの単位を参照してください
位置：左| | |センター|下トップセンター|右
説明：
背景画像や検索対象の位置を設定します。あなたは、背景画像のプロパティを指定する必要があります。デフォルト値は次のとおりです（0％0％）。
あなたは、横軸の値を指定した場合。縦軸は、50％がデフォルトになります。縦座標のための第二の値。
注意：
1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。
ほとんどの実際の作業が中心の背景画像です。
背景アタッチメント
構文：
background-attachment : scroll | fixed
パラメータ：
スクロール：背景画像は、オブジェクトの内容をスクロールである
固定：背景画像を固定し
説明：
背景画像をスクロールまたは固定されていると、オブジェクトの内容を設定または取得します。
背景速記
順番にプロパティの背景の公式の値を書き込むと何の義務標準はありません。：読みやすくするために、次のようにあなたが書いたことを示唆している
背景をバックグラウンドアドレス背景スクロール背景位置をタイル状の背景色の背景画像を
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
透明な背景（CSS3）
CSS3のサポート背景半透明の文言の構文は次のとおりです。
background: rgba(0,0,0,0.3);
最後のパラメータは、アルファ透明度は0から1の範囲の間であります
注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。
サンプルコード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
body {
height:2000px;
}
.box1 {
width:2000px;
height:200px;
/* 设置背景颜色 */
background-color:#eeeeee;
/* 设置背景图片 */
background-image:url(img/sun.jpg);
/* 设置图片不平铺 */
background-repeat:no-repeat;
/* 设置背景图片的定位---右下角（x轴，y轴） */
background-position:80px 150px;
/* background-position:right bottom; */
/*background-position:100% 50%;*/
/* 设置背景图片垂直水平居中 */
/* background-position:50% 50%; */
/* background-position:center; */
/* 设置背景图片的是否滚动 */
height:2000px;
background-attachment:fixed;
}
.box2 {
width:800px;
height:500px;
background:#eeeeee url(img/sun.jpg) no-repeat fixed 20px 20px;
}
</style>
</head>
<body>
<div class="box1">千金美酒千人干</div>
<div class="box2">纵是一醉连城也寒酸</div>
</body>
</html>
ナビゲーションバーケース
ヒント：行のボックスで、私たちはボックスの高さに行の高さを設定するには、垂直方向にテキストを作ることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏案例</title>
<style>
.nav {
width:100%;
height:50px;
/* 只能让里面的行内元素和行内块级元素居中，对里面的盒子无效 */
text-align:center;
}
.nav a {
width:120px;
height:50px;
display:inline-block;
background-color:#abcdef;
border-radius:5px;
text-decoration:none;
color:white;
text-align:center;
line-height:50px;
margin:30px 5px;
}
a:hover{
background-color:#a1aeb1;
}
.box {
width:100px;
height:100px;
/* 让块级盒子水平居中于当前父容器 */
/* 上下为0，左右居中 */
margin:0 auto;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
<a href="#">网站导航</a>
</div>
<div class="box"></div>
</body>
</html>