微信小程序 图片绝对定位(背景图片)

微信小程序中可以使用绝对定位来实现图片的定位，可以借助CSS中的position属性和top、right、bottom、left属性来设定图片的位置。同时，可以将一张图片设置为背景图片去实现背景的绝对定位。

以下是实现微信小程序中图片绝对定位的攻略：

1. 使用position属性

可以在CSS中将图片的position属性设置为absolute，表示该元素是绝对定位的。然后，使用top、right、bottom、left属性来分别设定图片离顶部、右侧、底部、左侧的距离。

示例代码：

.image {
  position: absolute;
  top: 50px;
  left: 50px;
}

<image class="image" src="./image.jpg"></image>

上述示例代码中，.image为图片的选择器，top和left属性分别设定了图片距离顶部和左侧的距离。

2. 使用background-image属性

还可以将一张图片设置为背景图片来实现绝对定位。需要在CSS中使用background-image属性来指定背景图片的路径，并使用background-position属性来指定背景图片距离容器左上角的距离。

示例代码：

.container {
  background-image: url('./image.jpg');
  background-position: 50px 50px;
}

<view class="container"></view>

上述示例代码中，.container为包裹图片的容器，background-image属性指定了背景图片的路径，background-position属性设定了背景图片距离容器左上角的距离。

总结

以上就是实现微信小程序中图片绝对定位的攻略。可以使用CSS中的position属性和top、right、bottom、left属性或background-image属性来实现图片的定位。具体使用哪种方式根据实际需求来选择。

接下来，我们再来看两个示例：

示例一：使用position属性实现图片上下左右居中

示例代码：

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<image class="image" src="./image.jpg"></image>

上述示例代码中，.image为图片的选择器，top和left属性分别设定为50%，即将图片放置在容器的中心。transform属性将图片向左或向上移动50个像素，使得图片可以上下左右居中。

示例二：使用background-image属性实现背景图片固定在底部

示例代码：

.container {
  background-image: url('./image.jpg');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
}

<view class="container"></view>

上述示例代码中，.container为包裹图片的容器，background-image属性指定了背景图片的路径，background-position属性设定了背景图片距离容器左上角的距离，background-repeat属性设定了背景图片不重复显示，background-size属性设定了背景图片的大小，height属性设定了容器的高度。这样，背景图片就能够固定在容器的底部了。