注冊登錄

微信小程序背景與微信小程序背景顏色相關(guān)設(shè)置

2020-09-28
導(dǎo)讀:2017年6月14日,微信小程序背景已經(jīng)是當(dāng)下微信小程序設(shè)計(jì)中最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦虮尘凹靶〕绦虮尘皥D設(shè)置相關(guān)的內(nèi)容。...


2017年,微信小程序背景已經(jīng)是當(dāng)下微信小程序設(shè)計(jì)中最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦虮尘凹靶〕绦虮尘皥D設(shè)置相關(guān)的內(nèi)容。

一:背景(Background)與顏色(Color)

一、背景:background。設(shè)置對象的背景特性。一個(gè)元素可以設(shè)置多重背景圖像,每組之間用逗號隔開,如果存在重疊關(guān)系,前面的背景圖像會覆蓋在后面背景圖上。

微信小程序背景與微信小程序背景顏色相關(guān)設(shè)置

1.background-color:指定背景的顏色。取值:正常的顏色取值。

2.background-image:背景圖片。如果設(shè)置了這個(gè)屬性,最好也添加下background-color ,用于當(dāng)背景image不可見時(shí)保持與文本顏色有一定的對比度

3.background-repeat:設(shè)置對象背景圖如何鋪排填充。

repeat-x:背景在橫向上平鋪。

repeat-y:背景在縱向上平鋪。

微信小程序背景與微信小程序背景顏色相關(guān)設(shè)置

repeat:背景圖在橫向縱向上平鋪。

no-repeat:圖像不平鋪。

round:背景圖像自動縮放直到適應(yīng)且填充整個(gè)容器。

space:背景圖像以相同的間距平鋪且填充滿整個(gè)容器或者某個(gè)方向。

space:

微信小程序背景與微信小程序背景顏色相關(guān)設(shè)置

round:

微信小程序背景與微信小程序背景顏色相關(guān)設(shè)置

4.background-attachment:指定對象的背景圖像是隨對象內(nèi)容滾動還是固定的。

取值:fixed:固定位置。scroll:相對于元素固定,跟著元素。local:相對于元素內(nèi)容固定,總是跟著內(nèi)容。

5.background-position:指定對象的背景圖像位置。

取值:left,right,top,bottom,center。也可以用百分比。

6.background-size:指定對象的背景圖像的尺寸大小。

取值:auto:背景圖的真實(shí)大小。cover:等比例縮放到完全覆蓋容器。有可能超出容器。

contain:將背景圖等比例縮放到寬度或者高度與容器的寬度或者高度相等,始終都在容器內(nèi)。

7.background-clip:指定對象的背景圖像向外裁剪的區(qū)域。

取值:padding-box:從padding區(qū)域(不含padding)開始向外裁剪背景。

border-box:從border區(qū)域(不含border)開始向外裁剪背景。

content-box:從content 區(qū)域開始向外裁剪背景。

text:從前景內(nèi)容的形狀做為裁剪區(qū)域向外裁剪。

8.background-origin:指定對象的背景圖像顯示的原點(diǎn)。

取值:padding-box:從padding區(qū)域(不含padding)開始向外裁剪背景。

border-box:從border區(qū)域(不含border)開始向外裁剪背景。

content-box:從content 區(qū)域開始向外裁剪背景。

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店