目標
- 理解
- アクション背景
- 違いCSSの背景画像と挿入画像
- アプリケーション
- CSSプロパティの背景によって、ページ要素に背景スタイルを追加
- あなたは、異なる背景画像の位置を設定することができます
[画像を挿入し、親要素のimg要素自体要素サイズを設定していない、あなたが見ることができますが、目に見える脳の幅広い要素を設定するためのバックグラウンド。]
4.1背景色（色）
構文：
background-color:颜色值; 默认的值是 transparent 透明的
4.2背景画像（画像）
- 構文：
background-image : none | url (url) | パラメータ | 効果 |
|---|---|
| なし | 背景なし（デフォルト） |
| URL | 絶対的または相対的アドレス指定された背景画像を使用します |
background-image : url(images/demo.png);- ヒント：私たちは、絵アドレス、引用符なしのURLの後ろに背景を提唱します。
4.3背景タイル（リピート）
- 構文：
background-repeat : repeat | no-repeat | repeat-x | repeat-y | パラメータ | 効果 |
|---|---|
| 繰り返す | 縦と横（背景画像をタイルデフォルト） |
| ノー・リピート | 背景画像がタイル張りされていません |
| 繰り返し-X | 横方向の背景画像タイル |
| 繰り返し-Y | 背景画像タイル垂直 |
4.4背景位置（ポジション）キー
- 構文：
background-position : length || length
background-position : position || position | パラメータ | 値 |
|---|---|
| 長さ | パーセンテージ|浮動小数点数による長さの値、及びユニット識別子 |
| ポジション | トップ|センター|下|左|中央|右名詞 |
- 注意：
- あなたは、背景画像のプロパティを指定する必要があります。
- 位置は、xとy座標の背後にあります。名詞が使用されるか、または正確なユニットとすることができます。
- あなたは、2つの値の前後には何の関係もありません順序は、両方の値が、そのような一貫性の左上と左上の効果として、2つの値の名を冠している指定した場合
- あなたが唯一の用語の向きを指定した場合、別のデフォルト値が中心。[2つの名詞を書くことをお勧めします。]
- 位置が正確な座標の背後にある場合、それは最初のxでなければならず、yは第2の定数であります
- 唯一の値は、その値がなければならない場合、別のデフォルト垂直センタリングx座標
- 二つの値が指定され、組み合わせて使用される装置名の正確な配向されている場合、最初のものは、x座標の値である、第2の値はy座標であります
ほとんどの実際の作業が中心の背景画像です。
演習1：
背景全体像
演習2：
小さな画像は、垂直ボックスの左中央に配置され
4.5背景アタッチメント
背景の添付ファイルは、背景が転がりまたは固定されている説明することです
構文：
background-attachment : scroll | fixed
| パラメータ | 効果 |
|---|---|
| スクロール | 対象コンテンツと背景画像がスクロールされます |
| 修繕 | 固定背景画像 |
4.6背景速記
- 背景：オーダープロパティの正式な値を書き込み、何の義務標準はありません。読みやすくするために、あなたが次のことを書くお勧めします。
- 背景：背景画像アドレス背景タイル背景背景スクロール位置の背景色。
- 構文：
background: transparent url(image.jpg) repeat-y scroll center top ;ケース：ナビゲーションケース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
/*让里面的6个链接 居中对齐水平 这句话对 行内元素 行内块元素都有效果的*/
text-align: center;
}
.nav a {
/*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/
display: inline-block;
width: 120px;
height: 50px;
/*行高等于盒子的高度 就可以让单行文本垂直居中*/
line-height: 50px;
color: #fff;
/*background-color: pink;*/
text-decoration: none;
/*背景简写*/
background: url(images/bg.png) no-repeat;
}
/*鼠标经过nav里面的链接， 背景图片更换一下就好了*/
.nav a:hover {
background-image: url(images/bgc.png);
}
</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>
<a href="#">123</a>
</body>
</html>4.7背景透明（CSS3）
- 構文：
background: rgba(0, 0, 0, 0.3);- 最後のパラメータは、0から1までの範囲、アルファ透明度の間であります
- 私たちは、0.3のうち、オミット0に慣れている、書き込み背景：RGBA（0、0、0、0.3）;
- 注：ボックスの内容は影響を受けないの内側に背景は、半透明、半透明の背景のボックスを指し、
- CSS3ので、とても少ないIE9以上のバージョンがサポートされていません。
4.8背景概要
| プロパティ | 効果 | 値 |
|---|---|---|
| 背景色 | 背景色 | 所定の色値/ヘキサン/ RGBコード |
| 背景画像 | 背景画像 | URL（画像のパス） |
| 背景リピート | かどうかのタイル | リピート/ノー・リピート/リピート-X /リピート-Y |
| 背景位置 | 背景位置 | 長さ/位置値ユニットは、最初のX Yに従ってなければならない場合、xおよびy座標は、正確な文言は覚えています |
| 背景アタッチメント | 固定またはスクロール背景 | スクロール/固定 |
| 背景速記 | より簡単に | 住所背景背景色の背景画像タイル張りの背景背景スクロール位置、彼らが注文していません |
| 透明な背景 | 半透明のボックスをしてみましょう | 背景：RGBA（0,0,0,0.3）; 4つの値が従わなければなりません |