- background-position
- background-size
Background-position
1- 定義菩暗、屬性&屬性值
指的是背景圖在元素中的位置
【語(yǔ)法】
屬性名:
background-position
屬性值:
(1) x y : x-水平偏移位置 y-垂直偏移位置
x 為正 畅涂，向右移動(dòng)
x 為負(fù) 圃郊，向左移動(dòng)
y 為正 ，向下移動(dòng)
y 為負(fù) 舞萄，向上移動(dòng)
(2) x% y% : 相對(duì)于所在的元素的寬度和高度來(lái)設(shè)置 相對(duì)比例
多數(shù)用于背景圖像居中顯示
(3)left
right
center
top
bottom
2- 語(yǔ)法解釋
舉幾組例子說(shuō)明：
background-position:0 0；默認(rèn)為所在元素左上角
background-position:-50px -100px;向左偏移50px，向上偏移100px
background-position:50% 50%;背景圖向右偏移量為所在元素寬度的50%渐白，向下偏移量為所在元素高度的50%
background-position:center center;背景圖片位于所在元素的中心
background-position:left center;背景圖片從左中處開(kāi)始向右平鋪
background-position:center top;背景圖片從上中處開(kāi)始向下平鋪
Background-size
1- 定義、屬性&屬性值
設(shè)置背景圖片的寬度和高度
【語(yǔ)法】
屬性名:
background-size
屬性值:
auto auto,為默認(rèn)值
長(zhǎng)度length和百分比percentage逞频。
(1)value1 value2;
(2)value1% value2%;
(3)cover;
(4)contain;
2- 語(yǔ)法解釋
1纯衍、value1 value2;
給定正的length值來(lái)調(diào)整背景圖片大小。
第一個(gè)值為設(shè)置背景圖寬度苗胀，第二個(gè)值為背景圖的高度襟诸；
假如只給定一個(gè)值，那么第二個(gè)自動(dòng)的為 'auto'基协；
ex:
background-size: auto;
background-size: 4em;
background-size: 100px;
background-size: 200px 100px;
background-size: auto 100px;
2歌亲、value1% value2%;
給定正的百分比來(lái)調(diào)整背景圖片大小。
背景圖大小是根據(jù)相對(duì)的背景區(qū)域來(lái)做調(diào)整澜驮，背景相對(duì)區(qū)域就是初始的包含塊陷揪。
假如只給定一個(gè)值，那么第二個(gè)自動(dòng)的為 'auto'；
ex:
background-size: 50%;
background-size: 50% 50%;
background-size: auto 50%;
background-size：100% 100%悍缠，背景圖片鋪滿整個(gè)內(nèi)容區(qū)
3卦绣、cover；
覆蓋
按比例調(diào)整背景圖片
所有的邊都已經(jīng)覆蓋到元素的邊緣時(shí)才停止縮放扮休。
有可能圖片顯示不完整迎卤。
4、contain;
包含
按比例調(diào)整背景圖片
只要有一條邊覆蓋到元素的邊緣上就停止縮放玷坠。
圖片一定會(huì)完整的顯示在背景中蜗搔，有可能不會(huì)覆蓋到所有的區(qū)域。
