背景樣式
在CSS3中，新增了3個(gè)背景屬性
| 屬性 | 說(shuō)明 |
|---|---|
| background-size | 背景大小 |
| background-origin | 背景位置 |
| background-clip | 背景剪切 |
background-size屬性
概念：在CSS3之前，我們是不能用CSS來(lái)控制背景圖片大小的，背景圖片的大小都是由圖片實(shí)際大小確定的。
但在CSS3中，可以用background-size屬性來(lái)定義背景圖片的大小。
特點(diǎn)
- 圖片可以保有其原有的尺寸，
- 圖片拉伸到新的尺寸，
- 圖片在保持其原有比例的同時(shí)縮放到元素的可用空間的尺寸
語(yǔ)法:：
background-size:屬性值；
常用屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| 像素值 | 設(shè)置背景圖像的寬度和高度。只能為正值。如果設(shè)置2個(gè)屬性值，則第1個(gè)屬性值定義寬度，第2個(gè)屬性值定義高度。如果只設(shè)置1個(gè)屬性值，則表示寬度，而高度則等比例縮放 |
| 百分比 | 以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。只能為正值。如果設(shè)置2個(gè)屬性值，第一個(gè)屬性值設(shè)置寬度，第二個(gè)屬性值定義高度。如果只設(shè)置1個(gè)屬性值，該屬性值表示寬度，而高度則等比例縮放 |
| auto | 定義背景圖像按照原始尺寸表示 |
| cover | 即“覆蓋”，表示把背景圖像等比例縮放到完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法在背景定位區(qū)域中。和contain相反，cover值盡可能大的縮放背景圖像并保持圖像的寬高比例（圖像不會(huì)被壓扁）。該背景以它的全部寬或者高覆蓋所在容器。當(dāng)容器和背景圖像大小不同時(shí)，背景圖的左/右或者上/下部分會(huì)被裁剪 |
| contain | 即”容納“，表示把背景圖像等比例縮放到寬度或高度與容器的寬度或高度相等時(shí)，以使背景圖像位于區(qū)域內(nèi)，但可能使背景區(qū)部分空白。contain盡可能的縮放背景并保持圖像的寬高比例（圖片不會(huì)被壓縮）。該背景圖會(huì)填充所在的容器。當(dāng)背景圖和容器的大小不同時(shí)，容器的空白區(qū)域（上/下或者左/右）會(huì)顯示由background-color設(shè)置的背景顏色 |
注意：沒(méi)有被背景圖片覆蓋的背景區(qū)域仍然會(huì)顯示用background-color屬性設(shè)置的背景顏色。此外，如果背景圖片設(shè)置了透明或者半透明屬性，襯在背景圖片后面的背景色也會(huì)顯示出來(lái)
單張圖片的背景大小可以使用以下方法中的一種來(lái)規(guī)定：
- 使用關(guān)鍵字contain
- 使用關(guān)鍵字cover
- 設(shè)定寬度和高度值
當(dāng)通過(guò)寬度和高度來(lái)定義尺寸時(shí)，可以提供一或者兩個(gè)數(shù)值:
- 當(dāng)通過(guò)寬度和高度值來(lái)設(shè)定尺寸時(shí)，你可以提供一或者兩個(gè)數(shù)值：
- 如果僅有一個(gè)數(shù)值被給定，這個(gè)數(shù)值將作為寬度值大小，高度值將被設(shè)定為
auto。 - 如果有兩個(gè)數(shù)值被給定，第一個(gè)將作為寬度值大小，第二個(gè)作為高度值大小。
每個(gè)值都可以是像素值 還是百分比,或者auto
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景圖片的大小</title>
<style type="text/css">
div{
display:inline-block;
width:200px;
height:150px;
border:1px solid green;
margin:20px;
background-image:url('../邊框樣式/image/son.jpg');
background-repeat:no-repeat;
}
.a{
background-size:200px 150px;
}
.b{
background-size:100% 100%;
}
.c{
background-size:auto;
}
.d{
background-size:cover;
}
.e{
background-size:contain;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</body>
</html>
運(yùn)行結(jié)果
注意：背景圖片跟普通圖片（即是img標(biāo)簽）是不同的東西。width跟height這兩個(gè)屬性只能用來(lái)定義img標(biāo)簽圖片的大小，而不能用于控制背景圖片的大小
background-origin屬性
概念：默認(rèn)情況下，background-position屬性總是以元素左上角為坐標(biāo)原點(diǎn)定位背景圖像。
在CSS3中，可以使用background-origin屬性來(lái)定義背景圖片是從什么地方開(kāi)始平鋪的，也就是定義背景圖片background-image屬性的原點(diǎn)位置的背景相對(duì)區(qū)域
語(yǔ)法：
background-origin:屬性值;
說(shuō)明
屬性值
| 屬性值 | 說(shuō)明 |
|---|---|
| border-box | 從邊框區(qū)域（含邊框）開(kāi)始顯示背景圖像 |
| padding-box | 默認(rèn)值，從內(nèi)邊距區(qū)域（含內(nèi)邊距）開(kāi)始顯示背景圖像 |
| content-box | 從內(nèi)容區(qū)域（含內(nèi)容）開(kāi)始顯示背景圖像 |
注意：當(dāng)使用background-attachment為fixed時(shí)，該屬性將被忽略不起作用
邊框區(qū)域，內(nèi)邊距區(qū)域和內(nèi)容區(qū)顯示如圖
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景圖片位置</title>
<style>
div{
display:inline-block;
width:200px;
height:150px;
border:10px solid green;
margin:20px;
padding:20px;
background-image:url('../邊框樣式/image/border.png');
background-repeat:no-repeat;
text-align-last: center;
line-height:150px;
font-size:20px;
}
.a{
background-origin:border-box;
}
.b{
background-origin:padding-box;
}
.c{
background-origin:content-box;
}
</style>
</head>
<body>
<div class="a">border-box</div>
<div class="b">padding-box</div>
<div class="c">content-box</div>
</body>
</html>
運(yùn)行結(jié)果
實(shí)際上，background-origin屬性的本質(zhì)是：定義background-position屬性相對(duì)于什么位置來(lái)定位。如果沒(méi)有設(shè)置background-position,因此瀏覽器會(huì)采用默認(rèn)值，即"background-position:top left"。
background-clip屬性
概念：background-clip屬性用于定義背景圖片的裁剪區(qū)域
語(yǔ)法：
background-clip:屬性值;
屬性值
| 屬性 | 說(shuō)明 |
|---|---|
| border-box | 默認(rèn)值，從邊框區(qū)域開(kāi)始向外裁剪背景圖像 |
| padding-box | 從內(nèi)邊距區(qū)域開(kāi)始向外裁剪背景圖像 |
| content-box | 從內(nèi)容區(qū)域開(kāi)始向外裁剪背景圖像 |
| text | 背景被裁剪成文字的前景色 |
邊框區(qū)域，內(nèi)邊距區(qū)域和內(nèi)容區(qū)顯示如圖
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>裁剪圖像</title>
<style>
div{
display:inline-block;
width:200px;
height:150px;
border:10px dotted green;
margin:20px;
padding:20px;
background-image:url('../邊框樣式/image/son.jpg');
background-repeat:no-repeat;
text-align-last: center;
line-height:150px;
font-size:20px;
color:white;
}
.a{
background-clip:border-box;
}
.b{
background-clip:padding-box;
}
.c{
background-clip:content-box;
}
.d{
background-clip:text;
color:rgba(0,255,255,0.6);
}
</style>
</head>
<body>
<div class="a">border-box</div>
<div class="b">padding-box</div>
<div class="c">content-box</div>
<div class="d">text</div>
</html>
運(yùn)行結(jié)果
多重背景圖像
概念：
所謂的多重背景圖像，指的是該元素的背景圖像不止一張
在CSS3之前版本中，一個(gè)容器中只能填充一幅背景圖像，如果重復(fù)設(shè)置，后設(shè)置的背景圖像會(huì)覆蓋之前的背景圖像
但在CSS3的背景圖像功能增強(qiáng)了很多，允許在一個(gè)容器里顯示多幅背景圖像，使背景圖像效果更容易控制。
CSS3中沒(méi)有為實(shí)現(xiàn)多重背景圖像提供對(duì)應(yīng)的屬性，而是通過(guò)background這個(gè)復(fù)合屬性來(lái)實(shí)現(xiàn)多重背景圖像的效果，各屬性值之間用英文逗號(hào)（,）隔開(kāi)。
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多重背景圖像</title>
<style>
div{
width:1200px;
height:800px;
border:1px solid blueviolet;
background:url("../邊框樣式/image/fish4.png") left center no-repeat ,url("../邊框樣式/image/fish.png") top center no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
運(yùn)行結(jié)果
除了運(yùn)用background復(fù)合屬性，也可以通過(guò)background屬性的子屬下background-image、background-repeat、background-position等屬性提供多個(gè)屬性值來(lái)實(shí)現(xiàn)多重背景圖像的效果
/* background復(fù)合屬性 */
background:url("../邊框樣式/image/fish4.png") left center no-repeat ,url("../邊框樣式/image/fish.png") top center no-repeat;
/* background子屬性，這兩者效果是一樣的*/
background-image: url("../邊框樣式/image/fish4.png"),url("../邊框樣式/image/fish.png");
background-repeat:no-repeat;
background-position:left center,top center;
background-size:40%;
這兩者是等價(jià)的，運(yùn)行效果都一致的。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-821530.html
說(shuō)明：多重背景圖像在實(shí)際開(kāi)發(fā)中，不建議使用多張背景圖片，因?yàn)槊慷嘁粡垐D片就會(huì)多引發(fā)一次HTTP請(qǐng)求，勢(shì)必影響頁(yè)面加載速度文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-821530.html
到了這里，關(guān)于CSS3背景樣式詳解（圖像大小，圖像位置等）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
