1. backgroundcolor

<view class="teststycleone">这是一个测试</view>

.teststycleone{

  width: 400rpx;

  height: 400rpx;

  background-color:red;

}

2.background-image

微信小程序view background-image 不能够直接显示本地,但是可以直接显示网络图片

.teststycleone{

  width: 100%;

  height: 800rpx;

  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20191101%2F13%2F1572587142-OWtDHfnCik.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631504528&t=a5e018a6f61c37ae3d0043b38eb1f9c9');

  background-position: center;

}

 对于本地图片的上传 我们可以采用  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;

  }

 

3、或者将本地图片转化成base64方式引用图片

转化图片的网址

https://www.bejson.com/ui/image2base64/

 <view class="viewstyle"> 这是一个测试 </view>

·············································································

  .viewstyle{

    width: 300rpx;

    height: 300rpx;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    background-  image: url("data:image/png;base64,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");

  }

 

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐