[TOC] # 圖片格式 * jpeg: 對色彩保留較好,高清 * gif: 最多只能存儲256色, 但是可以保存透明背景和動畫效果 * png: 結合了gif和jpeg的優點,能保存透明背景 * psd: ps的專用格式,里面可以存放圖層,通道,遮罩 # 背景屬性 ~~~ Background-color: 背景顏色 background-image:url(“1.png”); 背景圖片 background-repeat: repeat | no-repeat | repeat-x | repeat-y 背景平鋪方式 background-position: left | right | top | bottom | center 背景位置 Background-attachment: scroll|fixed 背景滾動 ~~~ * 寫方位的時候，沒有順序限制 * 如果只寫一個數值，數值為水平方向的值，垂直方向默認居中 * 如果寫二個數值，前值為水平方向，后值為垂直方向 背景屬性連寫 ~~~ background:red url("1.png") no-repeat 30px 40px scroll; ~~~ ★：連寫的時候沒有順序要求，url為必寫項。 # CSS 背景(background) CSS 可以添加背景顏色和背景圖片，以及來進行圖片設置。 | background-color | 背景顏色 | | ------------------------------------- | -------- | | background-image | 背景圖片地址 | | background-repeat | 是否平鋪 | | background-position | 背景位置 | | background-attachment | 背景固定還是滾動 | | 背景的合寫（復合屬性） | | | background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 | | ## 背景圖片(image) 語法： ~~~css background-image : none | url (url) ~~~ 參數： * none : 　無背景圖（默認的） * url : 　使用絕對或相對地址指定背景圖像 background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。 如果圖片不重復地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。 小技巧： 我們提倡 背景圖片后面的地址，url不要加引號。 ## 背景平鋪（repeat） 語法： ~~~css background-repeat : repeat | no-repeat | repeat-x | repeat-y ~~~ 參數： * repeat : 　背景圖像在縱向和橫向上平鋪（默認的） * no-repeat : 　背景圖像不平鋪 * repeat-x : 　背景圖像在橫向上平鋪 * repeat-y : 　背景圖像在縱向平鋪 設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。 ## 背景位置(position) 語法： ~~~css background-position : length || length background-position : position || position ~~~ 參數： * length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位 * position : 　`top | center | bottom | left | center | right ` 說明： 設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值為：(0% 0%)。 如果只指定了一個值，該值將用于橫坐標。縱坐標將默認為50%。第二個值將用于縱坐標。 注意： 1. position 后面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。 2. 如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面。比如 `background-position: 15px top;` 則 15px 一定是 x坐標 top是 y坐標。 實際工作用的最多的，就是背景圖片居中對齊了。 如果圖片太大的話,可以用水平居中,垂直靠上 ~~~ background-position : center -10px ~~~ ## 背景附著(attachment) 語法： ~~~css background-attachment : scroll | fixed ~~~ 參數： * scroll : 　背景圖像是隨對象內容滾動 * fixed : 　背景圖像固定 說明： 設置或檢索背景圖像是隨對象內容滾動還是固定的。 ## 背景簡寫 background屬性的值的書寫順序官方并沒有強制標準的。為了可讀性，建議大家如下寫： `background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置` ~~~css background: transparent url(image.jpg) repeat-y scroll 50% 0 ; ~~~ ## 背景透明(CSS3) CSS3支持背景半透明的寫法語法格式是: ~~~css background: rgba(0,0,0,0.3); ~~~ 最后一個參數是alpha 透明度 取值范圍 0~1之間 注意： 背景半透明是指盒子背景半透明， 盒子里面的內容不收影響。 同樣， 可以給 文字和邊框透明 都是 rgba 的格式來寫。 ~~~css color:rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3); ~~~ ## 背景縮放(CSS3) 通過background-size設置背景圖片的尺寸，就像我們設置img的尺寸一樣，在移動Web開發中做屏幕適配應用非常廣泛。 其參數設置如下： a) 可以設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高） b) 設置為cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏。 c) 設置為contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域. ~~~css background-image: url('images/gyt.jpg'); background-size: 300px 100px; /* background-size: contain; */ /* background-size: cover; */ ~~~ ## 多背景(CSS3) 以逗號分隔可以設置多背景，可用于自適應布局 ~~~css background-image: url('images/gyt.jpg'),url('images/robot.png'); ~~~ 如果設置的多重背景圖之間存在交集(即存在重疊關系),前面的背景圖會覆蓋在后面的背景圖之上. 為了避免背景色將圖像蓋住,背景色通常都定義在最后一組上 ~~~css background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px , url(test1.jpg) no-repeat scroll 10px 20px/70px 90px , url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa; ~~~ # css精靈圖 將網頁中的一些背景圖像整合到一張大圖中(精靈圖). 然而,各個網頁元素通常只需要精靈圖中不同位置的某個小圖,要想精確定位到精靈圖中的某個小圖, 就需要使用css的`background-image`, `background-repeat`和`background-postition`屬性進行背景定位,其中最關鍵的是使用background-position屬性精確的定位 ~~~ .box{ width: 24px; height: 22px; background: url("ta.png") 0 -266px; } <div class="box"></div> ~~~ 就是這背景圖有很多小圖標,靠移動橫坐標和縱坐標,顯示一張大圖上的小圖 CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），那我們要做的，就是把小圖拼合成一張大圖。 大部分情況下，精靈圖都是網頁美工做。 ~~~ 我們精靈圖上放的都是小的裝飾性質的背景圖片。 插入圖片不能往上放。 我們精靈圖的寬度取決于最寬的那個背景。 我們可以橫向擺放也可以縱向擺放，但是每個圖片之間，間隔至少隔開偶數像素合適。 在我們精靈圖的最低端，留一片空隙，方便我們以后添加其他精靈圖。 ~~~ 小公司，背景圖片很少的情況，沒有必要使用精靈技術，維護成本太高。 如果是背景圖片比較多，可以建議使用精靈技術。 # 去除圖片底側空白縫隙 如果一個元素沒有基線，比如圖片或者表單等行內塊元素，則他的底線會和父級盒子的基線對齊。 這樣會造成一個問題，就是圖片底側會有一個空白縫隙。 解決的方法就是： 1. 給`img vertical-align:middle | top`等等。 讓圖片不要和基線對齊。 2. 給img 添加 `display：block;` 轉換為塊級元素就不會存在問題了 # 滑動門 為了使各種特殊形狀的背景能夠自適應元素中文本內容的多少，出現了CSS滑動門技術。它從新的角度構建頁面，使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強。 最常見于各種導航欄的滑動門  核心技術就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應不同字數的導航欄。 一般的經典布局都是這樣的： ~~~ <li> <a href="#"> <span>導航欄內容</span> </a> </li> ~~~ ~~~ <style> * { margin: 0px; padding: 0px; } a { margin: 100px; display: inline-block; height: 33px; /* 千萬不能給寬度, 寬度是不對, 我們要推拉門, 自由縮放 */ background: url(images/ao.png) no-repeat; padding-left: 15px; color: #fff; text-decoration: none; line-height: 33px; } a span { height: 33px; display: inline-block; background: url(images/ao.png) no-repeat right; /* span不能給寬度,利用padding把盒子撐開, 要右邊的圓角, 所以背景位置右對齊 */ padding-right: 15px; } </style> <body> <a href=""> <span>111</span> </a> <a href=""> <span>222</span> </a> <a href=""> <span>333</span> </a> </body> ~~~ 總結： 1. a 設置 背景左側，padding撐開合適寬度。 2. span 設置背景右側， padding撐開合適寬度 剩下由文字繼續撐開寬度。 3. 之所以a包含span就是因為 整個導航都是可以點擊的。