020_CSS背景
1. CSS允許應用純色作為背景, 也允許使用背景圖像創建相當復雜的效果。
2. CSS背景屬性
3. 所有背景屬性都不能繼承。
4. 背景色
4.1. background-color屬性設置元素的背景顏色。這個屬性接受任何合法的顏色值。
4.2. background-color屬性為元素設置一種純色。這種顏色會填充元素的內容、內邊距和邊框區域。如果邊框有透明部分(如虛線邊框), 會透過這些透明部分顯示出背景色。
4.3. 可以為所有元素設置背景色, 這包括body一直到em和a等行內元素。
4.4. 默認值
4.5. 可能的值
4.6. 例子
4.6.1. 代碼
<!DOCTYPE html> <html><head><title>背景色</title><meta charset="utf-8" /><style type="text/css">body { background-color: yellow; }h1,h2,p {width: 200px;height: 200px;border: dashed 10px;margin: 10px;padding: 20px;float: left;}h1 {background-color: #00ff00; }h2 {background-color: transparent; }p {background-color: rgb(250,0,255); }</style></head><body><h1>這是標題 1</h1><h2>這是標題 2</h2><p>這是段落</p></body> </html>4.6.2. 效果圖
5. 背景圖像
5.1. background-image屬性為元素設置背景圖像。
5.2. 如果需要設置一個背景圖像, 必須為這個屬性設置一個url值:
body {background-image: url('eg_bg_04.gif'); }5.3. 元素的背景占據了元素的全部尺寸, 包括內邊距和邊框, 但不包括外邊距。
5.4. 默認地, 背景圖像位于元素的左上角, 并在水平和垂直方向上重復。
5.5. 默認值
5.6. 可能的值
6. 背景重復
6.1. background-repeat屬性設置是否及如何重復背景圖像。
6.2. 默認值
6.3. 可能的值
6.4. 例子
6.4.1. 代碼
<!DOCTYPE html> <html><head><title>背景重復</title><meta charset="utf-8" /><style type="text/css">body { background-image: url('eg_bg_03.gif');background-repeat: repeat-y;}</style></head><body></body> </html>6.4.2. 效果圖
7. 背景定位
7.1. background-position屬性設置背景圖像的起始位置。
7.2. 默認值
7.3. 可能的值
8. 背景定位-關鍵字
8.1. 圖像放置關鍵字最容易理解, 其作用如其名稱所表明的。例如: top right使圖像放置在元素內邊距區的右上角。
8.2. 根據規范, 位置關鍵字可以按任何順序出現, 只要保證不超過兩個關鍵字,?一個對應水平方向, 另一個對應垂直方向。
8.3. 如果只出現一個關鍵字, 則認為另一個關鍵字是center。兩個關鍵字沒有順序。
8.4. 水平方向關鍵字: left、right和center。
8.5. 豎直方向關鍵字: top、bottom和center。
8.6. 例子
8.6.1. 代碼
<!DOCTYPE html> <html><head><title>背景定位-關鍵字</title><meta charset="utf-8" /><style type="text/css">div {width: 150px;height: 150px;border: solid 1px;margin: 10px;background-image: url('eg_bg_03.gif');background-repeat: no-repeat;float: left;}#div1 {background-position: center; background-color: red;}#div2 {background-position: center center; background-color: red;}#div3 {background-position: center left; background-color: yellow;}#div4 {background-position: center right; background-color: orange;}#div5 {background-position: center top; background-color: gray;}#div6 {background-position: center bottom; background-color: blue;}#div7 {background-position: left; clear: left; background-color: yellow;}#div8 {background-position: left top; background-color: green;}#div9 {background-position: left bottom; background-color: pink;}#div10 {background-position: left center; background-color: yellow;}#div11 {background-position: right; clear: left; background-color: orange;}#div12 {background-position: right top; background-color: lightblue;}#div13 {background-position: right bottom;}#div14 {background-position: right center; background-color: orange;}#div15 {background-position: top; clear: left; background-color: gray;}#div16 {background-position: top left; background-color: green;}#div17 {background-position: top right; background-color: lightblue;}#div18 {background-position: top center; background-color: gray;}#div19 {background-position: bottom; clear: left; background-color: blue;}#div20 {background-position: bottom left; background-color: pink;}#div21 {background-position: bottom right;}#div22 {background-position: bottom center; background-color: blue;}</style></head><body><div id="div1">center</div><div id="div2">center center</div><div id="div3">center left</div><div id="div4">center right</div><div id="div5">center top</div><div id="div6">center bottom</div><div id="div7">left</div><div id="div8">left top</div><div id="div9">left bottom</div><div id="div10">left center</div><div id="div11">right</div><div id="div12">right top</div><div id="div13">right bottom</div><div id="div14">right center</div><div id="div15">top</div><div id="div16">top left</div><div id="div17">top right</div><div id="div18">top center</div><div id="div19">bottom</div><div id="div20">bottom left</div><div id="div21">bottom right</div><div id="div22">bottom center</div></body> </html>8.6.2. 效果圖
9. 背景定位-百分數值
9.1. 百分數值同時應用于元素和圖像。也就是說, 圖像中描述為50% 50%的點(中心點)與元素中描述為50% 50%的點(中心點)對齊。
9.2. 如果只提供一個百分數值, 所提供的這個值將用作水平值, 垂直值將假設為50%。這一點與關鍵字類似。
9.3. 例子
9.3.1. 代碼
<!DOCTYPE html> <html><head><title>背景定位-百分數值</title><meta charset="utf-8" /><style type="text/css">div {width: 150px;height: 150px;border: dashed 10px;margin: 10px;padding: 10px;background-image: url('eg_bg_03.gif');background-repeat: no-repeat;float: left;}#div1 {background-position: 0% 0%;}#div2 {background-position: 0% 50%;}#div3 {background-position: 0% 100%;}#div4 {background-position: 50% 0%;}#div5 {background-position: 50% 50%;}#div6 {background-position: 50% 100%;}#div7 {background-position: 100% 0%;}#div8 {background-position: 100% 50%;}#div9 {background-position: 100% 100%;}#div10 {width: 1300px;background-position: 10% 0%;}</style></head><body><div id="div1">0% 0%</div><div id="div2">0% 50%</div><div id="div3">0% 100%</div><div id="div4">50% 0%</div><div id="div5">50% 50%</div><div id="div6">50% 100%</div><div id="div7">100% 0%</div><div id="div8">100% 50%</div><div id="div9">100% 100%</div><div id="div10">10% 0%</div></body> </html>9.3.2. 效果圖
10. 背景定位-長度值
10.1. 長度值是圖像的左上角相對于元素內邊距區左上角的偏移。
10.2. 比如:?如果設置值為50px 100px, 圖像的左上角將在元素內邊距區左上角向右50像素、向下100像素的位置上:
body { background-image: url('/i/eg_bg_03.gif');background-repeat: no-repeat;background-position: 50px 100px; }10.3. 例子
10.3.1. 代碼
<!DOCTYPE html> <html><head><title>背景定位-長度值</title><meta charset="utf-8" /><style type="text/css">div {width: 150px;height: 150px;border: solid 1px;margin: 10px;background-image: url('eg_bg_03.gif');background-repeat: no-repeat;float: left;}#div1 {background-position: 0px 0px;}#div2 {background-position: 10px 0px;}#div3 {background-position: 20px 0px;}#div4 {background-position: 0px 10px;}#div5 {background-position: 0px 20px;}#div6 {background-position: 10px 10px;}#div7 {background-position: 10px 20px;}#div8 {background-position: 20px 10px;}#div9 {background-position: 20px 20px;}</style></head><body><div id="div1">0px 0px</div><div id="div2">10px 0px</div><div id="div3">20px 0px</div><div id="div4">0px 10px</div><div id="div5">0px 20px</div><div id="div6">10px 10px</div><div id="div7">10px 20px</div><div id="div8">20px 10px</div><div id="div9">20px 20px</div></body> </html>10.3.2. 效果圖
11. 背景關聯
11.1. background-attachment屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動。
11.2. 默認值
11.3. 可能的值
11.4. 例子
11.4.1. 代碼
<!DOCTYPE html> <html><head><title>背景關聯</title><meta charset="utf-8" /><style type="text/css">body {margin: 0;padding: 0;}div {width: 200px;height: 1300px;border: solid 1px;background-repeat: no-repeat;background-attachment: scroll;background-image: url('eg_bg_03.gif');}</style></head><body><div></div></body> </html>11.4.2.?效果圖
12. 背景
12.1.?background 簡寫屬性在一個聲明中設置所有的背景屬性。
12.2. 在使用簡寫屬性時, 屬性值的順序為: background-color、background-image、background-repeat、background-attachment、background-position、background-size、background-origin和background-clip。
12.3. 屬性值之一缺失并不要緊, 只要按照此順序設置其他值即可。比如:?"background:?#ff0000 url('smiley.gif');" 也是允許的。
12.4.?通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。
12.5. 默認值
12.6. 可能的值
12.7.?例子
12.7.1.?代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>背景</title><style type="text/css">div {width: 500px;height: 1500px;border: solid 1px;background: #FF0000 url('eg_bg_03.gif') no-repeat scroll top center / 260px 260px padding-box border-box;}</style></head><body><div></div></body> </html>12.7.2.?效果圖
總結
- 上一篇： 015_CSS伪元素选择器
- 下一篇： 022_CSS文本