顏色值通常以以下方式定義:
background-image 屬性設定乙個元素的背景影象。
元素的背景是元素的總大小,包括填充和邊界(但不包括邊距)。
預設情況下,background-image放置在元素的左上角,並重複垂直和水平方向。值說明
url('url')
影象的url
none
無影象背景會顯示。這是預設值說明
repeat
背景影象將向垂直和水平方向重複。這是預設
repeat-x
只有水平位置會重複背景影象
repeat-y
只有垂直位置會重複背景影象
no-repeat
background-image不會重複
inherit
指定background-repea屬性設定應該從父元素繼承值描述
scroll
背景隨著頁面的滾動而滾動,這是預設的。
fixed
背景不會隨著頁面的滾動而滾動。
水平表示 left 、center、right
垂直表示 top、center、bottom
如果僅指定乙個關鍵字,其他值將會是"center",不區分順序
x標識水平,y標識垂直 ,百分數值同時應用於元素和影象,預設為0% 0%
如果影象位於 0% 0%,其左上角將放在元素內邊距區的左上角。如果影象位置是 100% 100%,會使影象的右下角放在右邊距的右下角。
舉例
結果:
的66% 33%的點與元素body的66% 33%的點對應起來
與元素內邊距區左上角的偏移。偏移點是影象的左上角。
舉例 :
設定值為 50px 100px,影象的左上角將在元素內邊距區左上角向右 50 畫素、向下 100 畫素的位置上:
注意:這一點與百分數值不同,因為偏移只是從乙個左上角到另乙個左上角。也就是說,影象的左上角與 background-position 宣告中的指定的點對齊。
background-origin屬性指定background-position屬性應該是相對位置。 預設為padding-box
background-origin: padding-box|border-box|content-box;
如果背景影象background-attachment是"固定",這個屬性沒有任何效果。
舉例:
背景影象邊界框的相對位置:
背景影象填充框的相對位置:
背景影象的相對位置的內容框:
結果
background-size: length|percentage|cover|contain;值描述
length
設定背景高度和寬度。第乙個值設定寬度,第二個值設定的高度。如果只給出乙個值,第二個是設定為 auto(自動)
percentage
將計算相對於背景定位區域的百分比。第乙個值設定寬度,第二個值設定的高度。如果只給出乙個值,第二個是設定為"auto(自動)"
cover
此時會保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最小大小。
contain
此時會保持影象的縱橫比並將影象縮放成將適合背景定位區域的最大大小。
注意點
background-size屬性,該屬性可以設定背景的大小,該屬性的值設定為絕對數值或者百分比時對background-position沒有任何影響,當設定為contain/cover時就會產生影響,其中有乙個值會無效。
background-size:contain 該屬性會讓背景寬度或高度適應父元素,如果要縮放的話是等比例縮放,背景絕對不會超出父元素
background-size:cover 該屬性會讓背景填滿父元素,如果要縮放的話是等比例縮放,背景可能會超出父元素
當的寬度大於高度時,position的top值無效
當的寬度小於高度時,position的left值無效
background-clip: border-box|padding-box|content-box; 預設值為border-box
舉例:
沒有背景剪裁 (border-box沒有定義):
background-clip: padding-box:
background-clip: content-box:
結果:
總結屬性
作用值background-color
背景顏色
預定義顏色值/十六進製制/rgb**
background-image
背景url(路徑)
background-repeat
是否平鋪
repeat/no-repeat/repeat-x/repeat-y
background-attachment
背景附著
srcoll 滾動/fixed 固定
background-position
背景位置
length/percentage,px x座標,y座標
background-orign
背景相對元素的定位
padding-box|border-box|content-box ;預設padding-box
background-size
背景大小
length|percentage|cover|contain
background-clip
指定背景繪畫區域
border-box|padding-box|content-box; 預設值為border-box
背景簡寫
復合寫法
背景顏色 背景位址 背景平鋪 背景滾動 背景位置
背景色半透明
背景色半透明
background:rgba(0,0,0,0.3) 後面必須是四個值
CSS樣式(四) CSS定位
css定位 positioning 屬性 允許定義元素框相對於其正常位置應該改出現的位置,或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。一切皆為框 1 塊級元素 div h1或p標籤 即 顯示為一塊內容稱之為 塊框 2 行內元素 span,strong,a等元素 即 內容顯示在行中稱 行內框...
css基礎樣式四
上次我們講到了相對定位 這次我們了解下絕對定位 絕對定位 絕對定位會脫離文件流。所以之前的位置就會被後面的內容給填補 絕對定位的元素的位置相對於最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那麼它的位置相對於最初的包含塊。浮動 如圖 浮動也會像絕對定位那樣脫離文字流,就相當於飄了起來,在天上,...
css樣式學習?
在要用時選取那段文字,再在css面板上點一下 bgstyle 就行了。8 如何給部分文字加背景影象?與加背景色操作類似,中是在背景在選擇載入圖象就是了,乙個定義好的加背景圖象的css例子的 是這樣的 在要用時選取那段文字,再在css面板上點一下 imgbgstyle 就行了。9 如何使頁面的背景在文...