當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

020_CSS背景

發布時間：2025/4/17 CSS 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 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.?效果圖

總結

以上是生活随笔為你收集整理的020_CSS背景的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

背景
_CSS