微信小程序里遇到一個關(guān)于background的小問題,記錄一下啦。
看,這是問題:
解決的方法:
其實人家已經(jīng)告訴了解決方法 但是我愿意再抄一遍
1.把background屬性 寫為
<image class="imagesstyle" src="../../imgs/test.png"></image>
采用 image 組件 沉底的方式實現(xiàn)
<view>
<image class="imagesstyle" src="../../imgs/test.png"></image>
<text class='textstyle'> 這是一個測試 </text>
</view>
/**index.wxss**/
.imagesstyle{
width:400rpx;
height:400rpx;
position:fixed;
z-index:1;
}
.textstyle{
font-size:40rpx;
position:fixed;
color:red;
z-index:2;
}
2.微信小程序view background-image 不能夠直接顯示本地,但是可以直接顯示網(wǎng)絡(luò)圖片
.teststycleone{
width: 100%;
height: 800rpx;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669519459&t=ad5831f1aef8aa5554bcb2a06e416000');
background-position: center;
}
3.將本地圖片轉(zhuǎn)化成base64方式引用圖片
轉(zhuǎn)化圖片的網(wǎng)址https://www.bejson.com/ui/image2base64/文章來源:http://www.zghlxwxcb.cn/news/detail-569679.html
.viewstyle{
width: 300rpx;
height: 300rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
background-images:url('base64碼')
);
文章來源地址http://www.zghlxwxcb.cn/news/detail-569679.html
到了這里,關(guān)于微信小程序wxss background的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!