微信ウィジェットcssローカル背景画像の設定
1330 ワード
微信ウィジェットでは、cssでローカルピクチャを直接使用してviewの背景ピクチャを設定します.
WeChatウィジェットでは、background-url()などのローカルピクチャをCSSでロードすることはできません.ローカルピクチャbase 64化しない限り、imageコンポーネントしか使用できません.画像を背景に、上の海に他のコンポーネントを並べたい場合は、位置決めレイアウトを使用する必要があります.コードは次のとおりです:xwml:
wxss:
位置決め方法を採用しないと、other-widgetはブロックレベルの要素に従ってimageの下に並べられますが、絶対位置決めを採用してother-widgetをドキュメントストリームから離れると、containerに対して位置決めされ、背景画像上の効果も実現します.
报错:
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に対して位置決めされ、背景画像上の効果も実現します.