css中的background背景屬性使用總結

background背景屬性是CSS中重要的一個屬性。使用background屬性可以設定一個背景元素的各種樣式，包含了設定填充背景的顏色，使用自己的圖片作為背景，讓圖片會水平和垂直重複直至鋪滿整個元素，控制著背景圖片在元素中的位置等等。使用圖片作為背景在一個網頁布局中常常會遇到，一般設定對象圖片作為背景屬性執行個體，首先設定背景顏色 緊跟設定圖片作背景 緊跟圖片是否重複 然後跟圖片在對象位置。前面的背景顏色可以不用設同時不是必須，一般使用圖片作為對象背景如果要設定圖片是否重複顯示距離位置將設定圖片位置。以下的內容就來具體說明background背景屬性的各種使用方式。

首先可以學習php中文網相關的免費課程

1. 學習《CSS 0基礎入門教程》中的 CSS背景 章節課程

2. 觀看《黑馬程式員css視頻教程》中的 背景和邊距 視頻課程

background背景屬性

1. 必須掌握的CSS知識-background屬性

當我們為body設定border後，我們會發現border只是圈住了body裡面有內容的地方。但是為body設定背景色，則填充整個螢幕。

使用映像作為背景時，映像他的定位是參照螢幕的可視地區，而不是被border框住的部分。

每個參數使用空格隔開，依次是顏色，圖片，重複，固定方式，位置。

2. css中background相關屬性

百分比/length：若為百分數，背景圖的尺寸為容器乘以百分數的乘積。只設一個，第二個為auto（以保持和原始背景圖一樣的長寬比例）。

如果都設為100%，則背景圖會鋪滿容器，但長寬比率會發生變化。

contain:容器按背景圖的固定比例包含整個背景圖。背景圖的尺寸以背景圖按固定比例放大，其任意一條邊到達容器的邊界為止，經常會導致另一邊空白(有no-repeat時)。

cover:背景圖按固定長寬比放大，至填充滿整個容器為止（背景圖短一點的那條邊也到達容器邊界）。有一部分的背景圖會因超出容器而被切除。

3. 詳解css之背景background屬性

在同一個元素中，background複合屬性寫在前面，單獨需要設定的背景屬性寫最後面；理由：長江前浪推後浪，前浪死在沙灘上

在同一元素中添加了多個背景圖，其他背景屬性只能單獨寫，不能在用複合屬性簡寫；

在嵌套的父子級元素中，不建議寫同名屬性。理由：在子項目尺寸大於等於父元素尺寸的情況下，父元素的樣式會被子項目覆蓋；

在實際工作中，多用背景圖，少用插入圖片。

4. CSS3中關於新增背景系列background的詳解

border-box： 忽略邊框，直接從邊框的起始0，0點開始平鋪 padding-box：預設值，忽略padding，直接從padding的起始0,0點開始平鋪 content-box：從內容部分開始平鋪，會預留出padding的位置。所以說padding會對它造成影響

5. 網頁中css background背景圖和背景顏色的設定方法

CSS 背景這裡指通過CSS對對象設定背景屬性，如網頁中通過CSS設定背景各種樣式。

Css background背景作用：設定純色背景。背景background可以設定對象純色的背景顏色，設定圖為背景。可以設定對象背景為圖片，如果背景是圖片可以讓圖片重複平鋪橫鋪，或將圖片作為對象背景固定在對象任何位置。

6. CSS的background屬性及CSS3的背景圖片設定總結分享

background 在一個聲明中設定所有的背景屬性

background-attachment 設定背景映像是否固定或者隨著頁面的其餘部分滾動

background-color 設定元素的背景顏色

background-image 設定元素的背景映像

background-position 設定背景映像的開始位置

相關問答

1. 如何加速css background圖片的載入速度

2. ios 不能用 background:unset嗎？那想做取消背景色怎麼做？

3. body 的 background 位置

【相關推薦】

1. php中文網免費教程：《CSS 線上手冊》

2. php中文網免費視頻教程：《彈指間學會HTML視頻教程》

3. php中文網免費視頻教程：《php.cn獨孤九賤（2）－css視頻教程》