CSS3background中屬性值介紹

2021-07-25 05:24:12 字數 2605 閱讀 2286

background-size

語法:background-size:[ , ]*

= [ | | auto ] | cover | contain

取值:auto 背景影象的真實大小,預設值

用長度值指定背景影象大小

用百分比指定背景影象大小

cover 將背景影象等比縮放到完全覆蓋容器,背景影象有可能超出容器

contain 將背景影象等比縮放到寬度或高度與容器的寬度或高度相等,背景影象始終被包含在容器內

說明:如果取值為2個,則第乙個定義寬度,第二個定義高度,如果只提供乙個,則只定義寬度,高度為auto。

相容性:(來自

一些**:

css[css]

view plain

copy

div   

.cover   

.contain   

.percentage   

.length   

.auto_height   

html

[html]

view plain

copy

<

div>

auto

div>

<

divclass

="cover"

>

cover

div>

<

divclass

="contain"

>

contain

div>

<

divclass

="percentage"

>

percentage

div>

<

divclass

="length"

>

length

div>

<

divclass

="auto_height"

>

auto_height

div>

效果:background-origin

語法:background-origin:[ , ]*

= border-box | padding-box | content-box

取值:padding-box 預設值,從padding區域(含padding)開始顯示背景影象

border-box 從border區域(含border)開始顯示背景影象

content-box 從content區域開始顯示背景影象

說明:該屬性計算背景影象background-position的參考原點(位置)

相容性:(來自

一些**:

css[css]

view plain

copy

div   

.padding_box   

.border_box   

.content_box   

html

[html]

view plain

copy

<

divclass

="padding_box"

>

padding-box

div>

<

divclass

="border_box"

>

border-box

div>

<

divclass

="content_box"

>

content-box

div>

效果:background-clip

語法:background-clip:[ , ]*

= border-box | padding-box | content-box | text

取值:border-box 預設值,從border區域(不含border)開始向外裁剪背景

padding-box 從padding區域(不含padding)開始向外裁剪背景

content-box 從content區域開始向外裁剪背景

說明:

指定物件的背景向外裁剪的區域

相容性:(來自

一些**:

css[css]

view plain

copy

div   

.border_box   

.padding_box   

.content_box   

html

[html]

view plain

copy

<

divclass

="border_box"

>

border-box

div>

<

divclass

="padding_box"

>

padding-box

div>

<

divclass

="content_box"

>

content-box

div>

效果:注釋:css3中,允許多背景影象,以上三個background屬性均支援對多背景影象定義。

CSS3 background新增屬性用法

1.background屬性列表 background color background position background size background repeat background origin background clip background attachment backgr...

css3 background屬性調整增強介紹

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

CSS3中background背景的使用

1.background漸變色例子 2.background clip裁剪區域 background clip有三種屬性 border,padding,content.分別指覆蓋border的區域,覆蓋padding區域裁剪border.覆蓋content區域裁剪border和padding.3.b...