WeChat applet absolute positioning of pictures (background picture)

WeChat mini program absolute positioning of pictures

Preface:

In applets, background images are sometimes needed, but if you use background-image, you cannot control the size of the image. background-image is generally used to compress the image into a 1-pixel background image and then automatically fill it up. When using background images, you usually use some new view layers, such as<image class="jxlogo" src="../../image/"/>etc. However, the applet is similar to html. A different css or wxss will occupy a position, and the next css or wxss will automatically type down. However, many times this is not what we want, so we need to use absolute positioning.

Using absolute positioning, it is best to use a new wxss to include all child controls, and then define a property position: relative in this wxss containing all child controls. In each child control, define position: absolute. You can now modify the position through absolute positioning, such as top, etc. The following is a 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 the wxml code:

&lt;view class="jx_card"&gt;
  &lt;image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{}}" src="../../image/Coupon_03.png"&gt;
      &lt;image class="jxlogo" src="../../image/"/&gt;
  &lt;/image&gt;
 &lt;/view&gt;

This is probably the content. It mainly defines the position type first through position, and then uses top to find the position on the picture and define it.

Thank you for reading, I hope it can help you. Thank you for your support for this site!