Method for absolute positioning of pictures (background pictures) in WeChat mini programs

This article mainly introduces the relevant information about the absolute positioning of WeChat mini program pictures (background pictures). Friends in need can refer to it

Absolute positioning of WeChat mini program pictures

Foreword:

In small programs, sometimes you need to use background images, but if you use background-image, you cannot control the size of the image. Background-image is generally used for Compress the image into a 1-pixel background image, and then automatically fill it. If you use a background image, you generally use some new view layers, such as , etc., but the size is small The program is similar to HTML. A different css or wxss will occupy a position, and then the next css or wxss will automatically typeset downwards. However, many times this is not what we want, so absolute positioning needs to be used.

To use absolute positioning, it is best to use a new wxss to include all child controls, and then in this wxss containing all child controls, define a property position: relative, in each child control , define position: absolute, now you can modify the position through absolute positioning, such as top, etc. Attached below is part of the wxss code:

.jx_card{
  width: 100%;
  height: 295rpx;
  background-color:#e6e6e6;
  position: relative
}
 .jxlogo{
  top: 47.5rpx;
  margin-left: 50rpx;
  width: 200rpx;
  height: 200rpx;
  float: left;
  position: absolute;
}

Then attach wxml Code:

<view class="jx_card">
  <image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/优惠券_03.png">
      <image class="jxlogo" src="../../image/jx.png"/>
  </image>
 </view>

The content is roughly like this. It mainly defines the positioning type through position, and then uses top to find the position on the picture and define it.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of WeChat Mini Program Amap SDK

How to obtain yourself through WeChat Mini Program The function of the longitude and latitude coordinates of the location

The implementation of the multiple picture upload function of the WeChat applet

The above is the detailed content of Method for absolute positioning of pictures (background pictures) in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!