詳解css3系列:background屬性

11699847034_6b43d779b8_z
今天分享這篇文章是在逛w3cfun這個網站中看到的一篇有關於css3 background屬性的文章,因為其中有一些屬性質是css3新增的,那我們一般人也可能比較不會用或事還不太了解,所以分享給你喔!

在css中,共有如下幾個background屬性
屬性
描述
CSS

 

屬性                                        描述                                                                                          css
background       在一個聲明中設置所有的背景屬性。                                    1
background-attachment    設置背景圖像是否固定或者隨著頁面的其餘部分滾動。  1
background-color      設置元素的背景顏色。                                                            1
background-image    設置元素的背景圖像。                                                            1
background-position   設置背景圖像的開始位置。                                                    1
background-repeat       設置是否及如何重複背景圖像。                                              1
background-clip     規定背景的繪製區域。                                                               3
background-origin    規定背景圖片的定位區域。                                                       3
background-size     規定背景圖片的尺寸。                                                               3

從上列我們可以看出background-clipbackground-originbackground-size是css3中新增的屬性。

`background` – `clip`:border-box | padding-box | content-box | no -clip

用來確定背景的裁剪區域。
引擎類型
Gecko
Webkit
Presto
background-clip
background-clip-moz-background-clip-webkit-background-clip-o-background-clip
注:本屬性不支持IE6,7,8
一張圖看懂三個屬性值的區別
请输入图片描述
———————————————————————————————–
background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain
cover:把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。
背景圖像的某些部分也許無法顯示在背景定位區域中。

contain:把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。

———————————————————————————————–
background -origin : border | padding | content
取值
border:從border區域開​​始顯示背景。
padding:從padding區域開​​始顯示背景。
content:從content區域開​​始顯示背景。
请输入图片描述
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s