微信小程序里遇到一个关于background的小问题,记录一下啦。
看,这是问题:
解决的方法:
其实人家已经告诉了解决方法 但是我愿意再抄一遍
1.把background属性 写为
<image class="imagesstyle" src="../../imgs/test.png"></image>
采用 image 组件 沉底的方式实现
<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 不能够直接显示本地,但是可以直接显示网络图片
.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.将本地图片转化成base64方式引用图片
转化图片的网址https://www.bejson.com/ui/image2base64/文章来源:https://www.toymoban.com/news/detail-569679.html
.viewstyle{
width: 300rpx;
height: 300rpx;
background-repeat: no-repeat;
background-size: 100% 100%;
background-images:url('base64码')
);
文章来源地址https://www.toymoban.com/news/detail-569679.html
到了这里,关于微信小程序wxss background的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!