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