深入理解CSS背景

2022-01-17 18:46:48 字數 3759 閱讀 4800

背景色background接受所有合法的顏色,還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent,如果乙個元素沒有指定的顏色,那麼背景就應當是透明的,這樣其祖先元素的背景才能可見。

值: | transparent | inherit

初始值: transparent

應用於: 所有元素

繼承性: 無

值: | none | inherit

初始值: none

應用於: 所有元素

繼承性: 無

背景影象預設從乙個元素的左上角padding-box開始平鋪(background-repeat),但其從各個方向朝外面平鋪,包括border區域。背景平鋪的屬性值中space和round是css3新增的值。space表示背景影象的兩端對齊平鋪,多出來的空間用空白代替;round也表示背景影象的兩端對齊平鋪,但多出來的空間通過自身拉伸來填充

[注意]space和round這兩個新增屬性值firefox、safari和ie9-瀏覽器不支援

值: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit

初始值: repeat

應用於: 所有元素

繼承性: 無

背景定位background-position

值: [[| left | center | right] | | top | center | bottom ] ? ] || [[left | center | right] || [top | center | bottom]] | inherit

初始值: 0% 0%

應用於: 全部元素

繼承性: 無

百分數: 相對於元素和原影象的相應點

【寫法】

關鍵字x(水平方向):

left: 圖的左側和元素左側對齊

center:圖的中間和元素中間對齊

right:圖的右側和元素右側對齊

y(垂直方向):

top: 圖的頂部和元素頂部對齊

center:圖的中間和元素中間對齊

bottom:圖的底部和元素底部對齊

[注意]單一關鍵字:當某一方向的關鍵字為center時可省略

具體值x(水平方向):

正值從左向右移動,負值從右向左移動

y(垂直方向):

正值從上向下移動,負值從下向上移動

[注意]頁面左上角為原點(0,0)點

[注意]背景影象移出到元素範圍外的部分不顯示

百分比x%(水平方向):

背景影象的x%對應元素的x%

y%(垂直方向):

背景影象的y%對應元素的y%

[注意]若只寫了乙個值,另乙個值將是50%

【新用法】

在css2.1中,背景定位只支援以左上角為參照進行定位,在css3中新增了可以選擇參照方向的定位。第乙個和第三個引數為要參照的方向,第二個和第四個引數為偏移值

background-attachment背景關聯

值: scroll | fixed | inherit

初始值: scroll

應用於: 所有元素

繼承性: 無

fixed:原影象不會隨文件滾動,且原影象的放置由可視區的大小確定,而不是由包含該影象的元素的大小 或在可視區中的位置決定。在瀏覽器中,隨著使用者調整瀏覽器視窗的大小,可視區可能會改變。這會導致背景的原影象隨著視窗大小的改變移動位置。所以某種意義上說,影象並不是固定的,它只是在可視區大小不改變的情況下保持固定

[注意]ie6-瀏覽器無法處理非body元素上的固定關係

[注意]local屬性值ie8-瀏覽器不支援

background-origin: padding-box || border-box || content-box

padding-box: 預設值,決定背景定位起始位置從padding的外邊緣開始顯示背景

border-box: 決定背景定位起始位置從border的外邊緣開始顯示背景

content-box: 決定背景定位起始位置從content的外邊緣開始顯示背景

背景裁切(background-clip)屬性用來定義背景影象的裁剪區域。同背景原點的屬性有幾分相似

[注意]ie8-瀏覽器不支援

background-clip: padding-box || border-box || content-box

在webkit核心下支援text屬性

-webkit-background-clip: text;

配合-webkit-text-fill-color: transparent;的屬性可以使文字顏色呈現背景影象的效果

使用背景尺寸(background-size)屬性可以指定背景的尺寸,可以控制背景在水平和垂直兩個方向的縮放,也可以控制拉伸覆蓋背景區域的方式,甚至還可以擷取背景。背景能夠自適應元素盒子的大小,實現與模組大小完全適應的背景,避免了因區塊尺寸不同而需要設計不同的背景

[注意]ie8-瀏覽器不支援

當背景尺寸屬性為固定數值或百分比值時可以設定兩個值,也可以設定乙個值。只取乙個值時,指定了背景的寬度,第二個值相當於auto,也就是指定了高度。在這種情況下,auto值設定之後能夠讓背景的高度自動地按照比例縮放

background-size: auto || || || cover || contain

auto: 預設值,將保持背景的原始高度和寬度

: 取具體的整數值

: 取百分比,相對於元素的寬度和padding的總和來計算

cover: 將背景放大,以適合鋪滿整個容器。但這種方法會致使背景失真。常與background-position: center配合來製作滿屏背景效果。缺點是需要製作一張足夠大的背景,否則在較大解析度瀏覽器下會使背景失真

contain: 保持背景影象本身的寬度比例,將背景影象縮放到寬度或高度正好適應所定義背景容器的區域

在使用css3之前,每個容器只能指定一張背景影象,因此每當需要增加一張背景影象時,必須至少新增乙個容器來容納它。使用偽元素顯示附加其實就是巢狀html標籤實現多背景影象的變身,通過:after和:before等偽元素生成附加元素來放置背景影象,表面上比直接巢狀html標籤更乾淨一些,但其實是換湯不換藥

[注意]ie8-瀏覽器不支援

通過css3的多背景屬性,html標記就不需要任何修改,在css的background-image或者background屬性中列出需要使用的所有背景影象,用逗號分隔開。而且每張都具有background中的屬性

css3多背景有層次之分,按照瀏覽器中顯示時影象疊放的順序從上到下指定,最先宣告的背景影象將會居於最上層,最後指定的背景影象將置於最底層

除了背景顏色之外,其他的屬性都可以設定多個屬性值,前提是元素有多個背景影象存在

對於不相容多背景的瀏覽器來說,多背景屬性寫在單一背景屬性的後面,而且還要確保這張單一背景影象確實可用。這是處理相容css3多背景特性相容的常用方案

background: [background-image] | [background-color] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-origin] | [background-clip],*

[注意]若background在background-origin和background-clip中僅存在乙個值,則該值為background-clip;若存在兩個值,則前面為background-origin,後面為background-clip

[注意]所有背景屬性都不能繼承

深入理解CSS背景

背景色background接受所有合法的顏色,還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent,如果乙個元素沒有指定的顏色,那麼背景就應當是透明的,這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...

深入理解CSS浮動

float 浮動 浮動元素脫離普通流,然後按照指定方向,向左或者向右移動,碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...

css深入理解padding

padding 中規中矩,性格溫婉平和!css padding與容器的尺寸關係複雜 對於block水平元素 沒有padding的時候 gay padding影響元素尺寸 理解為人身體的脂肪,人和人之間的距離 gay 但是width auto或box sizing為border box的時候 gay ...