css設定元素背景

2022-05-03 04:27:11 字數 1258 閱讀 4408

背景background 簡寫形式為

backgroud:background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image

其中1.background-color背景顏色

2.background-position 設定影象的位置 可取兩個值,字串的話,第乙個表示垂直方向,值包括top.bottom.center。第二個表示水平方向,值包括left.right.center。數字單位或百分數的話,第乙個表示水平方向,如10px即距離左邊界10px,第二個表示垂直方向 ,如10%,距離上邊界10%的高度距離,最上為0.最下為100%。

3.background-size背景尺寸,四個可取值。

數字單位  數字單位 第乙個為寬度,第二個為高度,如果只設定乙個,另乙個為auto.如20px 20px 

百分數 百分數  同上

contain 等比例縮放影象,影象盡量充滿容器,影象始終包含在容器裡

cover 等比例縮放,影象盡量覆蓋容器,有可能超出容器

auto 預設值,以本身尺寸顯示

4.background-repeat 可取五個值

repeat-x 水平方向平鋪影象,影象可能被截斷

repeat-y  垂直方向平鋪影象,影象可能被截斷

repeat 水平和垂直方向同時平鋪

space 水平或垂直方向平鋪影象,設定影象統一間距,確保影象不被擷取

round 水平或垂直平鋪影象,調整影象大小,確保不被截斷

no-repeat 禁止平鋪

5.background-origin 可取三個值,表示背景繪製區域

border-box 邊框和邊框以內

padding-box 邊框以內所有區域 

content-box 內容區域

6.background-clip 裁剪盒子,表示可見性,取值可origin相同

7.background-attachment 表示內容附著方式 可取三個值

fixed 固定在視窗上,內容動背景不動

local 背景隨內容滾動

scroll 背景固定在元素上,不隨內容滾動

8.background-image none或url,如果指定乙個以上,後面的繪製在前面影象下面。

body

對於順序,經過驗證,貌似沒有標準、

css 設定元素背景為透明

要設定某一元素的背景為透明,在 chrome firefox opera 下是這樣的 background color rgba 0,0,0,0.4 rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0 1之間。在 ie 中一般是這樣的 background color rgb 0,0,0...

css 設定元素背景為透明

要設定某一元素的背景為透明,在 chrome firefox opera 下是這樣的 background color rgba 0,0,0,0.4 rgba 中的最後乙個引數 0.4 就是想要的透明度,範圍在0 1之間。在 ie 中一般是這樣的 background color rgb 0,0,0...

CSS定位 元素層級 設定背景

一 定位 當開啟了元素的定位 position屬性值是乙個非static的值 時,二 相對定位 通常偏移量只需要使用兩個就可以對乙個元素進行定位,box2 box4 三 絕對定位 box2 s1四 固定定位 box2 五 元素的層級 z index.box2 box3 父元素的層級再高,也不會蓋過子...