CSS3之背景縮放

2021-09-11 15:59:41 字數 496 閱讀 1278

背景縮放(css3)

通過background-size設定背景的尺寸,就像我們設定img的尺寸一樣,在移動web開發中做螢幕適配應用非常廣泛。

其引數設定如下:

a) 可以設定長度單位(px)或百分比(設定百分比時,參照盒子的寬高)

b) 設定為cover時,會自動調整縮放比例,保證始終填充滿背景區域,如有溢位部分則會被隱藏。我們平時用的cover 最多

c) 設定為contain會自動調整縮放比例,保證始終完整顯示在背景區域。

/* background-size: cover; */背景(css3)

以逗號分隔可以設定多背景,可用於自適應布局 做法就是 用逗號隔開就好了。

css3之背景屬性之background size

設定元素背景 background repeat repeat no repeat 設定背景影象的平鋪方式 預設repeat background position left top 設定元素的背景定位起點,預設值為left top background size auto 設定背景影象的尺寸大小,...

CSS3 變形 縮放 scale

縮放 scale 函式讓元素根據中心原點對物件進行縮放。縮放 scale 具有三種情況 1 scale x,y 使元素水平方向和垂直方向同時縮放 也就是x軸和y軸同時縮放 例如 div hover注意 y是乙個可選引數,如果沒有設定y值,則表示x,y兩個方向的縮放倍數是一樣的。2 scalex x ...

css3 動態背景

動態背景 利用多層背景的交替淡入淡出,實現一種背景在不停變換的效果,先看圖。效果圖 demo位址 步驟 1.利用css的radial gradient建立乙個映象漸變的背景。其中的80 20 為漸變中心的x,y位置。具體的radial gradient用法可以參見這裡 2.重複第一步建立4個擁有不同...