作者：王梵，來(lái)自原文地址

先來(lái)看一段樣式，在wxss中

page{
    background-color: cadetblue;
    background-image: url(../../../image/weixin_logo.png);
    background-repeat:repeat-x;
    background-position-y: top;
}

注意，page前面并沒(méi)有小數(shù)點(diǎn)，而且也不用被調(diào)用，它會(huì)自動(dòng)被框架調(diào)用，使用里面的屬性來(lái)設(shè)置當(dāng)前頁(yè)面。

效果圖如下： 

---

background-color

設(shè)置背景色，這里設(shè)置的是界面的背景色，也可以是設(shè)置組件的背景色。既可以直接使用色值，如#ffffff，也可以使用小程序中內(nèi)置的一些設(shè)置了別名的色值，如上面的cadetblue。

---

background-image

設(shè)置背景圖片，使用url(../../../image/weixin_logo.png)，將圖片地址當(dāng)參數(shù)傳入即可。

---

background-repeat

背景圖片的重復(fù)類型，有以下幾個(gè)值

• repeat-x，在x方向上重復(fù)
• repeat-y，在y方向上重復(fù)
• no-repeat，不重復(fù)
• repeat，在x和y方向重復(fù)，這是默認(rèn)值
• round，背景圖自動(dòng)縮放直到適應(yīng)且填充整個(gè)容器。
• space，背景圖片以相同間距平鋪且填充滿整個(gè)容器或者某個(gè)方向

round（左）和space（右）的區(qū)別如下圖 

background-repeat屬性必須放在background-image屬性后面，如果放在它的前面，background-repeat就不起作用。

---

background-position，background-position-x，background-position-y

設(shè)置背景圖在x方向上的位置：background-position-x

• 數(shù)值
• left
• right
• center

設(shè)置背景圖在y方向上的位置：background-position-y

• 數(shù)值
• top
• bottom
• center

設(shè)置背景圖的位置：background-position

• 數(shù)值，比如直接寫background-position:200rpx 100rpx;意思就是在x軸上偏移200rpx，在y軸上偏移100rpx。如果只寫了一個(gè)值，比如：background-position:200rpx；那么在x軸上偏移200rpx，y軸上居中。
• 別名，background-position:right top;意思是x軸上居最右邊，y軸上居最上面，如果不設(shè)置第2個(gè)，則只在x軸上變化位置，y軸上居中。第1和第2個(gè)分別對(duì)應(yīng)x和y方向。

注意，background-position的2個(gè)參數(shù)值之間用空格分割，并不是逗號(hào)

---

再來(lái)看一下其它的background屬性，先看background-size

page{
    background-color: cadetblue;
    background-image: url(../../../image/weixin_logo.png);
    background-repeat:no-repeat;
    background-size: auto;
}

•  

background-size屬性用來(lái)設(shè)置背景圖片的尺寸大小，有3個(gè)值可供選擇

• auto，默認(rèn)值，顯示背景圖的真是大小
• contain，將背景圖等比縮放寬度或高度，使之與容器的寬度或高度相等，整張圖始終在容器內(nèi)。
• cover，等比縮放圖片，直圖片完全覆蓋容器，有可能超出容器。

3個(gè)屬性的效果圖如下，auto（左），contain（中），cover（右） 

---

background-clip屬性，有3個(gè)值

• padding-box，從padding區(qū)域（不含padding）開(kāi)始向外裁剪背景
• border-box，從border區(qū)域（不含border）開(kāi)始向外裁剪背景
• content-box，從content 區(qū)域開(kāi)始向外裁剪背景
• text，從前景內(nèi)容的形狀做為裁剪區(qū)域向外裁剪。

<view class="demo-view-2">
    <image class="image-1" src="{{urll}}"></image>
</view>

• 1
• 2
• 3

• 1
• 2
• 3

.demo-view-2{
    background-color: darkblue;
    height: 1050rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-1{
    background-image:url(../../../image/weixin_logo.png);
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 200rpx;
    height: 200rpx;
    background-color: white;
    padding: 100rpx;
    background-clip:border-box;

}

下圖是運(yùn)行效果，padding-box（左），content-box（中），border-box（右） 

比較容易看出content-box的意思。padding-box和border-box不知道有什么區(qū)別。

在寫background-image時(shí)，之前里面有一個(gè)background屬性，放在它前面，后面的background會(huì)把前面的background-image洗掉。

---

background-origin

background-origin設(shè)置背景圖像的起點(diǎn)，有3個(gè)可選值

• padding-box，從padding區(qū)域原點(diǎn)（左上角）開(kāi)始繪制背景圖像
• border-box，從border區(qū)域原點(diǎn)（左上角）開(kāi)始繪制背景圖像
• content-box，從content 區(qū)域的原點(diǎn)（左上角）開(kāi)始繪制背景圖像

<view class="demo-view-2">
    <image class="image-1"></image>
</view>

•  

.demo-view-2{
    background-color: darkblue;
    height: 1050rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-1{

    background-image:url(../../../image/weixin_logo.png);
    background-repeat: no-repeat;
    border-radius: 50%;
    width: 200rpx;
    height: 200rpx;
    background-color: white;
    padding: 100rpx;
    background-clip:border-box;
    background-origin: padding-box;

}