Rumah > applet WeChat > Pembangunan program mini > 微信小程序怎样加背景图片

微信小程序怎样加背景图片

angryTom
Lepaskan: 2020-03-23 11:29:21
asal
25126 orang telah melayarinya

经常为微信小程序设置颜色背景,突然发现一张好看的图片怎么把它设置为背景呢?

微信小程序怎样加背景图片

微信小程序怎样加背景图片    

以下总结了三种方法:

1、wxss中通过background-image设置网络图片来添加背景图片

微信小程序中background-image不能使用本地图片

推荐学习:小程序开发

background-image:url(https://xxxxxxxxxxxxxxxxxxxxxx)
Salin selepas log masuk

2、将图片转为Base64编码格式,然后使用background-image来添加背景图片;

background-image:url(转换之后的base64字符串)
Salin selepas log masuk

3、利用流布局,设置z-index层级,将image标签置于底层来添加背景图片。

//html
<view class="container">
  <image src=&#39;../image/1.jpg&#39;></image>
  <view class=&#39;up&#39;>
    我是一串字符串
  </view>
</view>
//css
.container{
  width: 100%;
  height: 600rpx;
  margin: 0;
  padding: 0;
  position: relative;
}
image{
  position: absolute;
  width: 100%;
  height: 600rpx;
}
.up{
  position: absolute;
  z-index: 1;
}
Salin selepas log masuk

PHP中文网,大量网站建设教程,欢迎学习!

Atas ialah kandungan terperinci 微信小程序怎样加背景图片. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan