CSS3 background新增屬性用法

2021-06-29 15:56:50 字數 1642 閱讀 1262

1. background屬性列表

background-color

background-position

background-size

background-repeat

background-origin

background-clip

background-attachment

background-image

background縮寫屬性的順序

background: [background-color] [background-image] [background-repeat]

[background-attachment] [background-position] / [ background-size]

[background-origin] [background-clip];

2,css3新增的backgroud-size用法

background-size: 200px;

background-size: 200px 100px;

background-size: 200px 100px, 400px 200px;//有多個影象

background-size: auto 200px;

background-size: 50% 25%;

background-size: contain;

background-size: cover;

使用|時,第乙個值是指背景影象的width,第二個指背景影象的height,如果只有乙個值,height就為auto

使用percentage注意:width和height是針對於背景區域,不是背景影象大小

3,css3新增的background-origin用法

background-origin是用來決定的原始起始位置。它有三個可選值content-box,padding- box,border-box(background-origin

如果寫在css中只有opera瀏覽器可以識別,如果希望在火狐或者chrome或 safari中使用,

要使用它們瀏覽器的私有屬性-moz-background-origin(firefox),-webkit-background-origin(chrome,safari),

並且對應的值是content,padding,border,省略了-box),即你可以選擇背景是從內容區域開始顯示,還是內邊距,還是邊框

如果背景不是no-repeat的話,這個屬性是無效的

4,css3新增的background-clip用法

ackground-clip與origin的可選擇一樣,也是有content- box,padding-box,border-box

(要注意在火狐和chrome和safari中,需要使用私有屬性,加上-mox-和 -webkit-,這裡就不贅述了,

參考解釋background-clip的內容)。怎樣個剪裁法呢。根據你設定的盒子部位,

那麼在這個部位的外邊緣以外的部分都會不可見。舉個具體例子,

起始位置和上面的例子一樣,比如是從border-box開始,但我background-clip設定的值是

content-box,在content之外,也就是border-box內,padding-box內的內容統統不可見。

css3 background屬性調整增強介紹

注 僅對css3對background的調整 增加的屬性進行了翻譯 css3對於backgrounds做了一些修改,最明顯的乙個就是採用設定多背景,不但新增了4個新屬性,並且還對目前的屬性進行了調整增強。1 多個背景 在css3裡面,你可以再乙個標籤元素裡應用多個背景。類似與css2.0版本的寫法,...

CSS3background中屬性值介紹

background size 語法 background size auto cover contain 取值 auto 背景影象的真實大小,預設值 用長度值指定背景影象大小 用百分比指定背景影象大小 cover 將背景影象等比縮放到完全覆蓋容器,背景影象有可能超出容器 contain 將背景影象...

CSS3 背景 background 屬性

background color 顏色值 預設的值是 transparent 透明色 background image none url url 引數 作用none 無背景圖 預設的 url使用絕對或相對位址指定背景影象 background repe repeat no repeat repeat...