首頁 >web前端 >css教學 >css中的background背景屬性使用總結

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

伊谢尔伦原創: 2017-06-08 11:48:092129瀏覽

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

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

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

2. 觀看 css中的background背景屬性使用總結《黑馬程式設計師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-image 設定元素的背景圖像

## position 設定背景影像的起始位置

#相關問答

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