CSS中Background淺析

objc94 發布于2019-08-30 13:03 / 3210人閱讀

摘要：如果只指定其中一個值，另一個值會被設定為因此可以和混用。通過設定負的，背景圖像的一部分被拖拽到父元素之外，從而在父元素之內顯示要顯示的內容。隨著的普及，相信漸變將成為主流?？梢燥@示的顯示范圍。

作為一個有理想有包袱的頁面仔，正像鑫哥在這篇文章說說CSS學習中的瓶頸
(強烈推薦)里說的

其實，廣大頁面屌絲們并不畏懼那些學習能力強的人，畏懼的是那些學習能力強，同時，尼瑪學習又拼命的人。
頁面仔們，捫心自問下：我每天幾點下班？我每天下班后都干嘛了？我有專門花空余時間深入理解學習CSS的一些東西嗎？我能夠連續堅持數月嗎？
最后，我只說一句話：“吃得苦中苦，方為人上人”。

個中滋味，看到這篇文章的人請去鏈接處細細品讀。這篇文章，也是你現在看到的這篇blog的來由。
不說廢話，let"s rumble。

background的簡寫支持以下屬性:background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment。下面分別解析。

關于background-position和background-size合用

如果同時定義background-position和background-size，必須使用/來分割它們。例子：background:url(smiley.gif) 10px 20px/50px 50px會讓background-image離父元素頂部20px,左邊10px,同時大小被限制在50px*50px(這里的background-size不同于background-clip，會強制限定背景元素的顯示大小，你也可以指定為auto auto,會根據背景圖片的原始大小顯示。但這里不能指定為initial initial,會報錯。

下面來一項一項說明。

background-color

為元素提供一個背景色。默認為transparent。可以使用顏色名，Hex,rgb和rgba等。background-image在會覆蓋在其上。為了良好的兼容性，在使用簡寫形式時最好寫在最后一項。W3SCHOOL原文:

If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
如果使用多重背景圖片和背景顏色，那么背景顏色參數需要在最后一項

background-image

元素的background范圍覆蓋了content, padding和border，但不包括margin.
格式為background-image:url("URL")。如果想設定多重背景，以comma(,)分割url
注:IE8及之前版本不支持多重background-image

background-position

默認值為0% 0%.
可以簡寫為屬性: background-position:x y; x和y的取值可以有以下形式：

關鍵字：x = [x for x in [left, right, center] y = [x for x in [top, center bottom]]. 咦我是不是一看到這種矩陣就想寫generator? 以上表達式翻譯成人話就是：x可以取left, right, center中的任意值，y可以取top, center, bottom中的任意值.如果只設置一個值，另一個會被自動設置為"center"

百分比:父元素的左上角為0% 0%, 右下角為100% 100%。注意這里的百分比同時被應用在-背景圖片元素的定位點到父元素左上角的距離-和-背景圖片自身的定位點到背景圖片左上角的距離。也就是說，如果我們設置background-position為50% 50%,背景圖片會在父元素里居中顯示，因為此時背景圖片的定位點位于背景圖片內部50% 50%處，同時這個定位點和父元素左上角的距離也是(父元素寬度和高度的)50% 50%.關于這一點，在精通CSS第二版的第56頁有更加形象和專業的描述

pixel或者其他任何有效的CSS單位.關于CSS單位，將是下一篇文章要探討的內容。如果只指定其中一個值，另一個值會被設定為50%. 因此可以和%混用。
說到這里css sprite技術就很好理解了。通過設定負的px，背景圖像的一部分被"拖拽"到父元素之外，從而在父元素之內顯示要顯示的內容。

background-size

可以設定為：

auto.為背景元素圖片的默認值

length.任何有效的CSS單位

percentage.父元素寬度和高度的百分比

可以清楚地看到，隨著父元素的拉長，基于父元素百分比的background-size也被拉長了。

cover.使父元素的最長邊被背景圖片所覆蓋。在父元素的較短邊上，可能會截取一部分背景圖片。

contain.使父元素的最短邊被背景圖片所覆蓋。在父元素的較長邊上，可能會留白。

background-repeat

大家很熟悉的屬性了。舊時代常常使用repeat-x和repeat-y加圖片切片來實現背景圖片的漸變效果。隨著CSS3的普及，相信CSS漸變將成為主流。在線的漸變生成器請見本文最后。

background-origin

和CSS中的box-sizing屬性很像，只不過box-sizing是用來定義長和寬，background-origin是用來定義背景圖片的起始位置。
取值：

默認值為padding-box.從padding的左上角開始顯示background-image.

border-box.從border的左上角開始顯示。

content-box. 從content的左上角開始顯示
更多演示

background-clip

和background-origin的取值一樣，也有三種:padding-box, border-box和content-box?？梢燥@示background的顯示范圍。
更好玩的是可以實現background只在text內顯示。詳見[這篇文章]（http://www.w3cplus.com/content/css3-background-clip）

background-attachment

指定background是否和內容一起滾動

CSS3 linear-gradient

可以直接設定background:linear-gradient。W3C鏈接
請忘記那些該死的語法吧，專注于設計。使用這些在線生成器來生成漸變代碼。
鏈接1
鏈接2
鏈接3

寫到這里，感覺自己有點三分鐘熱情了，內容越寫越簡略，果然自己還是不適合長時間碼字啊。本篇文章會繼續更新補充未完成內容，同時向大家推薦一個網站W3Cplus,共同學習！

GPU云服務器云服務器 css中 html中css css中視頻封面 css中div

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115266.html

盒子模型淺析

摘要：上篇文章總結了塊級元素和行內元素這篇文章總結了有關盒子模型的知識，助于梳理知識首先，什么是盒子模型我們知道，文檔中，基本上每個元素都可以看作一個盒子，我們稱之為盒子模型。在盒子模型中我們設置的指的是盒子真實占有寬高即如的寬高。上篇文章總結了塊級元素和行內元素這篇文章總結了有關盒子模型的知識，助于梳理知識首先，什么是盒子模型我們知道，html文檔中，基本上每個元素都可以看作一個盒子，我們稱...

番茄西紅柿 2019-04-23 13:38 評論0 收藏0
淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么...

voyagelab 2019-08-29 15:06 評論0 收藏0
淺析BFC

摘要：原文鏈接說起其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是。這種行為只存在于兄弟元素在同一下這種情形。上文提到的可以看下大漠的這篇文章參考理解布局和分鐘理解原理原文鏈接: Fyerls Blog 說起 BFC 其實有點像閉包在大多數人印象中的感覺，平時都用過，但在不了解定義的情況下大多數人卻又不知道這就是 BFC。之所以會想了解下什么...

My_Oh_My 2019-08-02 10:14 評論0 收藏0
link和@import的區別淺析

摘要：結論就結論而言，強烈建議使用標簽，慎用方式。這樣可以避免考慮的語法規則和注意事項，避免產生資源文件下載順序混亂和請求過多的煩惱。區別從屬關系區別是提供的語法規則，只有導入樣式表的作用是提供的標簽，不僅可以加載文件，還可以定義連接屬性等。我們都知道，外部引入 CSS 有2種方式，link標簽和@import。它們有何本質區別，有何使用建議，在考察外部引入 CSS 這部分內容時，經常被提...

YFan 2019-08-29 16:19 評論0 收藏0
link和@import的區別淺析

摘要：結論就結論而言，強烈建議使用標簽，慎用方式。這樣可以避免考慮的語法規則和注意事項，避免產生資源文件下載順序混亂和請求過多的煩惱。區別從屬關系區別是提供的語法規則，只有導入樣式表的作用是提供的標簽，不僅可以加載文件，還可以定義連接屬性等。我們都知道，外部引入 CSS 有2種方式，link標簽和@import。它們有何本質區別，有何使用建議，在考察外部引入 CSS 這部分內容時，經常被提...

cgh1999520 2019-08-23 10:53 評論0 收藏0