1. 程式人生 > >css3-顏色背景盒模型

css3-顏色背景盒模型

顏色

 rgba(255,0,0,0.1)

新增了RGBA、HSLA模式,其中的A 表示透明度通道,即可以設定顏色值的透明度,相較opacity,它們不具有繼承性,即不會影響子元素的透明度。
A 透明度 取值範圍0~1

背景

背景在CSS3中也得到很大程度的增強,比如背景圖片尺寸、背景裁切區域、背景定位參照點、多重背景等。

background-size: length|percentage|cover|contain;
  1. length第一個值設定寬度,第二個值設定高度。如果只設置一個值,則第二個值會被設定為 “auto”。
  2. percentage以父元素的百分比來設定背景影象的寬度和高度。第一個值設定寬度,第二個值設定高度。同樣如果只設置一個值,則第二個值會被設定為 “auto”。
  3. cover把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。背景影象的某些部分也許無法顯示在背景定位區域中。
  4. contain把影象影象擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域。但不能保證鋪滿盒子。

背景原點

background-origin: padding-box|border-box|content-box;
  1. padding-box背景影象相對於內邊距框來定位。也是預設值。
  2. border-box背景影象相對於邊框盒來定位。
  3. content-box背景影象相對於內容框來定位。

背景裁剪

background-clip: border-box|padding-box
|content-box;
  1. border-box背景被裁剪到邊框盒。預設值。
  2. padding-box背景被裁剪到內邊距框。
  3. content-box背景被裁剪到內容框。

對於background-clip, 其關鍵字是指將背景圖片以border的尺寸、以padding的尺寸,以content的尺寸進行切割,其得到的結果是不完整的背景,也就是其中的一部分(原理與截圖差不多)。而且有一點要注意,background-clip的切割是對這個容器背景的切割(包括圖片與背景顏色)。
對於background-origin,其關鍵字是指將背景圖片放置到border範圍內,padding範圍內、content範圍內,其得到的結果是完整的背景(原理與圖片的縮放

相似)。與background-clip不同的是,它只是單純設定背景圖片的邊界,並不會對背景顏色造成影響。

盒模型

box-sizing: content-box|border-box|inherit;
  1. content-box這是由 CSS2.1規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。預設值。實際的寬=width+padding+border
  2. border-box為元素設定的寬度和高度決定了元素的邊框盒。就是說,為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。width =border+padding+內容的寬
  3. inherit規定應從父元素繼承 box-sizing 屬性的值。