css背景屬性用於定義HTML元素的背景
背景屬性既可以為單個的單元設置背景，也可以為整個頁面設置背景，可以對上述二者的任意組合設置背景，段落、文字、不同狀態的鏈接、圖像、內容區域修改其背景樣式。設置背景有很多屬性可以利用。將在下文中詳細解釋這些屬性的用法。
css屬性定義背景效果
- background 簡寫屬性，將背景屬性設置在一個聲明中
- background-color 背景顏色
- background-image 背景圖片
- background-position 背景圖像定位，設置背景圖像的起始位置
- background-repeat 背景圖像是否重復及如何重復
- background-attachment 背景圖像是否隨着頁面滾動
css3背景屬性
- background-size 背景圖像的尺寸
- background-origin 背景圖像的定位區域
- background-cilp 背景圖像的繪制區域
一、css背景屬性
（一）修改文本顏色
background-color：
可以為所有的元素設置背景顏色，從整體頁面到單個元素都可行。
background-color屬性取值為color（顏色值）或是transparent（透明）
transparent 默認值，如果一個元素沒有設置背景顏色，那么他就是默認透明的，允許通過父元素的背景顏色，這樣其祖先元素就是可見的。
color顏色名稱，該屬性接受任何合法的顏色值通常使用：
- 顏色名稱（如：blue）；
- 十六進制數（如：#ff00ff 或 #f0f）；
- rgb（0,0,0）每個參數的取值范圍是：0~255；
- rgba（0,0,0,.5）最后一個參數代表的是透明度，取值范圍為（0~1）,值0.5半透明，值1不透明。
代碼：
效果：希望背景色從元素中的文本向外有延伸，只需增加一些內邊距：如padding：10px
（二）使用背景圖像作為背景
background-image:
默認情況下背景圖像會進行平鋪重復顯示。（在不設置任何東西的情況下，這個頁面中的背景圖片多次重復出現）
頁面示例:
background-image：屬性的默認值為none，表示背景沒有設置任何圖片。只有在覆蓋應用背景圖像的元素的樣式時才會使用這個聲明。
如果想使用圖片作為背景，就必須為這個屬性加上url（）。如：輸入一個url（image.jpg），這里的image.jpg是圖像相對於樣式表所在位置的路徑和文件名。
注意：圖片文件路徑問題
代碼：
效果：
（三）重復背景圖像
background-repeat：
該屬性設置是否重復以及如何重復該圖像，在默認情況下背景圖像會在水平方向和垂直方向上重復顯示。
背景圖像的位置是由background-position屬性決定的，如果沒有規定該屬性，那么重復將由頁面的左上角開始。
輸入background-repeat:direction，這里面direction可以取四個值：repeat、repeat-x、repeat-y、no-repeat。
- repeat 同時橫向和縱向重復圖像
- no-repeat 圖像不重復，只顯示一次
- repeat-x 背景圖像水平方向重復
- repeat-y 背景圖像垂直方向重復
代碼一
效果一
代碼二
效果二
代碼三
效果三
（四）設置背景圖像位置
background-position：
background-position_x_y屬性取值可以分為三類，x 和 y 可以表示為距離左上角的絕對定位或是百分數，x 標識水平方向上的定位方式，y 表示垂直方向上的定位方式。
- 關鍵字：如果僅規定了一個關鍵字，那么第二個值將會設置為“center”。注意：要把 background-attachment 取值屬性設置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。
用left(左對齊)、right(右對齊)、center(居中)表示x；
用top(頂端對齊)、center(居中)、bottom(底端對其)表示y軸。
- 百分數：可以將x和y設置為百分數（x%和y%），第一個值水平位置，第二個值垂直位置。左上角(0% 0%),右下角(100% 100%),同時水平垂直居中(50% 50%)，如果兩個值只規定了一個那么另一個默認是50%。（兩個值任意組合）
- 長度值：x值水平位置，y值垂直位置，左上角0 0（為0的時候不用加單位），單位是像素（0px 0px）或者其他任何單位，單位也可以為負值。多種類型的取值可以混合使用，如（center 30%）background-position 的默認值是 0% 0%，在功能上相當於 top left。這就解釋了背景圖像為什么總是從元素內邊距區的左上角開始平鋪，除非設置了不同的位置值。
代碼
效果 注意：如果希望background-position屬性使用關鍵字有效首先要設置background-attachment：fixed，如果不提前設置就會出現圖二效果；
（五）控制背景圖像是否固定或是隨頁面滾動
background-attachment：
屬性取值有兩個：
- fixed 背景圖像會附着在瀏覽器窗口上，即使訪問者滾動頁面，圖像仍然會繼續顯示。
- scroll 滾動，訪問者滾動頁面的時候，圖像會隨着頁面的滾動一起滾動。（默認值）
（六）簡寫屬性 在一條聲明中設置所有的背景屬性
background：
1、接受所有的背景屬性值，並且對這些值的排列並沒有先后順序要求。幾乎可以對所有的HTML元素添加背景。
2、通常的時候盡量使用簡寫屬性因為這樣更加簡便，不必指定所有的屬性（例如：background：#ffff00 url(image.jpg)）。在簡寫法中沒有任何指定的屬性都將設置為默認值，有可能會覆蓋先前定義的樣式。
3、默認情況下，元素的背景會填充內容區和內邊距部分，並直到抵到邊框的邊緣。可以通過 background-clip屬性具體設置。
代碼
表現效果
（七）默認值
background-color的默認值是transparent（透明）；background-image的默認值是none（無）；background-repeat的默認值是repeat（重復）；background-attachment的默認值是scroll（滾動）；background-position的默認值是0 0（等價於top left，即左上角），只有需要覆蓋其他樣式的規則時才去特意指定這些默認值。
二、css3定義背景屬性
（一）規定背景圖像的尺寸大小
background-size
background-size_a_b 可以通過以下屬性值控制背景圖像的顯示大小
- 長度值：第一個值設置寬度，第二個值設置高度。如果只設置了一個值，那么第二個值都會默認是“auto”。
- 百分比：以父元素的百分比來設置背景圖像的寬度和高度。第一個值寬度，第二個值是高度，只設置一個值，第二個值為“auto”
- auto：默認值，即保持圖片原有樣式的大小不做改變。
- cover：在填充元素整個背景區域的情況下，讓圖像盡可能的小，使用該值，圖像的一部分可能會超出背景定位區域，因而變得不可見。
- contain：在顯示圖像完整高度和寬度的情況下，盡可能的擴大圖像的尺寸，使用該值，圖像背景可能不會填充整個背景區域。
代碼
表現效果：並沒有占滿整個body區域
（二）背景所在的區域
background-cilp：
制定背景繪制的區域，取值有四個：
- border-box 默認值，背景放置在邊框方框內（剪切成邊框方框）
- padding-box背景繪制在內邊距方框內（剪切成襯距方框）
- center-box 背景放在在內容方框內（剪切成內容方框）
- text 背景放在文字區域內（剪切成文字形狀）
使用background-cilp:text實現文字底紋效果，具體實現方法可以點擊鏈接查看~
https://www.cnblogs.com/nyw1983/p/11363562.html
（三）背景開始的位置
background-origin
屬性規定background-position屬性相對於什么位置來定位，如果background-position的取值為fixed（固定），則該屬性沒有效果
- border-box 背景圖像相對於邊框盒來定位
- padding-box 背景圖像相對於內邊距框來定位
- center-box 背景圖像相對於內容區來定位
代碼
效果
實例：
1、background-origin: border-box; 背景圖像相對於邊框盒來定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像定位</title>
<style> div{ border:20px solid rgba(233,0,0,0.4); padding: 40px; background-image: url("1.jpg"); background-repeat: no-repeat; background-size:contain; background-position:left;
} .box1{ background-origin:border-box; width:200px; height:300px;
}
</style>
</head>
<body>
<div class="box1"> background-origin: border-box;背景圖像相對於邊框盒來定位。 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy </div>
</body>
表現效果：
2、background-origin: content-box; 背景圖像相對於內容框來定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像定位</title>
<style> div{ border:20px solid rgba(233,0,0,0.4); padding: 40px; background-image: url("1.jpg"); background-repeat: no-repeat; background-size:contain; background-position:left;
} .box2{ background-origin:content-box; width: 200px; height: 300px;
}
</style>
</head>
<body>
<div class="box2"> background-origin: content-box;背景圖像相對於內容框來定位。 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy </div>
</body>
表現效果：
3、background-origin: padding-box; 背景圖像相對於內邊距框來定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像定位</title>
<style> div{ border:20px solid rgba(233,0,0,0.4); padding: 40px; background-image: url("1.jpg"); background-repeat: no-repeat; background-size:contain; background-position:left;
} .box3{ background-origin:padding-box; width:200px; height:300px;
}
</style>
</head>
<body>
<div class="box3"> background-origin: padding-box;背景圖像相對於內邊距框來定位。 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy </div>
</body>
表現效果：
