微信ウィジェットcssローカル背景画像の設定


微信ウィジェットでは、cssでローカルピクチャを直接使用してviewの背景ピクチャを設定します.

报错:

VM198:5 pages/allTest/allTest.wxss              WXSS   ,        ,   base64,      。     :https://developers.weixin.qq.com/miniprogram/dev/qa.html#%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E6%97%A0%E6%B3%95%E9%80%9A%E8%BF%87-wxss-%E8%8E%B7%E5%8F%96
   8 |   align-content: center;
   9 |   background-image: url(../../image/alltest_bag.jpg)
> 10 | }
     |  ^

WeChatウィジェットでは、background-url()などのローカルピクチャをCSSでロードすることはできません.ローカルピクチャbase 64化しない限り、imageコンポーネントしか使用できません.画像を背景に、上の海に他のコンポーネントを並べたい場合は、位置決めレイアウトを使用する必要があります.コードは次のとおりです:xwml:

    
      



wxss:
.container{
    position: relative;
}
.other-widget{
    position: absolute;
}

位置決め方法を採用しないと、other-widgetはブロックレベルの要素に従ってimageの下に並べられますが、絶対位置決めを採用してother-widgetをドキュメントストリームから離れると、containerに対して位置決めされ、背景画像上の効果も実現します.