背景
在
CSS3中針對(duì)Background推出了多個(gè)新增的用法,接下來(lái)我們看看這些新的屬性
新增屬性
部分是有修改的,部分是新增的,其中CSS3中新增了很多好用的屬性
backGroundCSS3新增屬性
backGround-clip:
- 將背景設(shè)置好后,通過(guò)這個(gè)屬性可以把多余的背景切掉
background-size
- 設(shè)置背景圖片的大小,通過(guò)這個(gè)屬性可以使用多張圖片作為背景,關(guān)于如何設(shè)置多張圖片,可以查看
多重背景
/* 支持直接指定具體的大小 */
/* 寬度10 高度根據(jù)寬度計(jì)算 */
background-size: 10px;
/* 寬度10 高度 10 */
background-size: 10px 10px;
/* 背景圖片原始大小 */
background-size: auto;
/* 背景圖片原比例縮放到完全填滿 可能會(huì)超出 */
/* cover 直接等比例放大圖片,直到兩邊都頂格.如果圖片由于比例問(wèn)題出現(xiàn)超出范圍的情況,會(huì)出現(xiàn)圖片缺失的問(wèn)題,因?yàn)槌鋈サ膱D片會(huì)被切掉*/
background-size: cover;
/* 背景圖片原比例縮放到 高度 或者寬度 跟容器一樣 可能會(huì)有空白 */
/* contain 等比例放大,某一邊頂格 立刻停止放大*/
background-size: contain;
/*連寫時(shí)加`/` 例如:background: 圖片 repeat 位置 /大小 */
background-repeat
- 在原來(lái)只能設(shè)置平鋪,不平鋪的基礎(chǔ)上,增加了兩個(gè)屬性,讓我們?cè)谠O(shè)置背景圖時(shí)更為靈活
- 示例:
/* 自動(dòng)縮放 直到填滿 */
background-repeat:round;
/* 兩個(gè)方法都縮放,直到某一邊充滿容器為止 */
background-repeat:space;
background-origin
這個(gè)屬性設(shè)置的是背景圖片開(kāi)始的位置
-
核心代碼如下:
下面只列舉了div的樣式
div{
background-image:url('img/01.jpg');
background-repeat: no-repeat;
background-size: 50px 50px;
background-origin:可選值為border-box,padding-box,content-box
}
- border-box: 從邊框邊線的位置開(kāi)始
border-box
- padding-box 從padding開(kāi)始
padding-box
- content-box 從內(nèi)容開(kāi)始
content-box
- 復(fù)合寫法 直接 在末尾 添加 background-origin 屬性即可
background: url('img/lkw.jpg')no-repeat center/ cover content-box;
多重背景
background這個(gè)屬性在CSS1中就推出了，在CSS3中經(jīng)過(guò)修改，可以通過(guò)逗號(hào),的方式添加多個(gè)背景稍走。
background 在設(shè)置背景的時(shí)候 對(duì)于 過(guò)渡屬性transition的支持 較差
語(yǔ)法
background是復(fù)合屬性,可以添加多個(gè)值,編寫的時(shí)候需要注意順序
- 語(yǔ)法:
/* 復(fù)合寫法 */
background:url(圖片地址) 填充方式 固定方式 位置/大小 顯示原點(diǎn) 裁剪位置 背景顏色.
/* 多圖片 使用逗號(hào)分隔*/
background:圖片1,
圖片2,
圖片3.
/* 具體代碼 */
background: url('image/01.jpg') no-repeat 200px 300px,
url('image/02.jpg') no-repeat 100px 200px/100px 100px;
