css3之背景屬性之background size

2021-09-29 09:43:44 字數 1532 閱讀 8520

; //設定元素背景

background-repeat: repeat/no-repeat; //設定背景影象的平鋪方式 預設repeat

background-position

:left top; //設定元素的背景定位起點,預設值為left top

background-size:auto; //設定背景影象的尺寸大小,預設值auto

background-clip:border-box; //控制元素的背景影象顯示區域大小,預設值為border-box

background-origin:padding-box; //控制元素的背景影象position的預設起始點,預設值為padding-box

background-color:#abcdef; //設定背景顏色

初始樣式效果:按照原始大小進行展示

(1)cover效果

效果:按照背景最長邊進行按比例放大或縮小

(2)contain效果

效果:按照背景最短邊進行按比例放大或縮小

(3)寬高百分比

效果:寬度和高度按照百分比進行填充

background-positon的屬性值可以為left top

設定背景中心的位置

新增background-origin

新增background-clip

CSS3背景屬性

background是乙個使用率很高的屬性,也是乙個非常有用的屬性。背景主要包括5個基本屬性 background color 背景顏色 background image 背景 background repeat 背景展示方式 background attachment 背景是固定還是滾動 back...

CSS3 背景屬性

lang en charset utf 8 背景顏色title type text css divstyle head 背景顏色div body html lang en charset utf 8 背景title type text css divstyle head 背景div body htm...

CSS3之背景縮放

背景縮放 css3 通過background size設定背景的尺寸,就像我們設定img的尺寸一樣,在移動web開發中做螢幕適配應用非常廣泛。其引數設定如下 a 可以設定長度單位 px 或百分比 設定百分比時,參照盒子的寬高 b 設定為cover時,會自動調整縮放比例,保證始終填充滿背景區域,如有溢...