- background-position
- background-size
Background-position
1- 定義、屬性&屬性值
指的是背景圖在元素中的位置
【語法】
屬性名:
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ì)于所在的元素的寬度和高度來設(shè)置 相對(duì)比例
多數(shù)用于背景圖像居中顯示
(3)left
right
center
top
bottom
2- 語法解釋
舉幾組例子說明：
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;背景圖片從左中處開始向右平鋪
background-position:center top;背景圖片從上中處開始向下平鋪
Background-size
1- 定義、屬性&屬性值
設(shè)置背景圖片的寬度和高度
【語法】
屬性名:
background-size
屬性值:
auto auto,為默認(rèn)值
長度length和百分比percentage。
(1)value1 value2;
(2)value1% value2%;
(3)cover;
(4)contain;
2- 語法解釋
1、value1 value2;
給定正的length值來調(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%;
給定正的百分比來調(diào)整背景圖片大小。
背景圖大小是根據(jù)相對(duì)的背景區(qū)域來做調(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ū)域。
