微信小程序图片和背景图片属性

微信小程序图片image 属性

微信小程序中的image属性可以用于显示一张图片。在wxml文件中使用image标签，通过src属性指定图片的路径，即可将图片显示在小程序页面上。例如：

<image src="/images/avatar.png" />

其中，src属性可以使用绝对路径或相对路径指向图片文件。如果使用相对路径，则相对于当前文件夹的路径。如果图片路径是网络图片链接，则需要在小程序管理后台进行配置，才能正常显示。

除了src属性外，image标签还可以使用mode属性指定图片的显示方式。常用的mode属性值包括：

• aspectFit：宽度和高度都自适应，保持图片的宽高比不变，显示图片的全部内容。
• aspectFill：宽度和高度都自适应，保持图片的宽高比不变，裁剪图片使其填充满显示区域。
• widthFix：宽度自适应，高度根据图片的宽高比自动计算，显示图片的全部内容。
• center：居中显示图片，不缩放图片。

例如，以下代码将图片以宽度自适应的方式显示在页面上：

<image src="/images/avatar.png" mode="widthFix" />

另外的height和width也就是宽和高这种都很常见，这里就不多讲述

微信小程序背景图background的属性

1. background-color： 这个属性用来设置元素的背景颜色，可以使用十六进制值、RGB值和颜色名。

例如：

div {
  background-color: #000000; /* 使用十六进制值设置黑色背景 */
  background-color: rgb(0, 0, 0); /* 使用RGB值设置黑色背景 */
  background-color: red; /* 使用颜色名设置红色背景 */
}

1. background-image： 这个属性用来设置元素的背景图片，可以使用图片的URL地址或者使用内联图片。

例如：

div {
  background-image: url("img/bg.jpg"); /* 设置背景为图片 */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AA..."); /* 使用内联图片 */
}

1. background-repeat： 这个属性用来设置背景图片是否重复显示，可选的值有no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）和repeat（水平和垂直均重复）。

例如：

div {
  background-image: url("img/bg.jpg");
  background-repeat: no-repeat; /* 不重复 */
  background-repeat: repeat-x; /* 水平重复 */
  background-repeat: repeat-y; /* 垂直重复 */
  background-repeat: repeat; /* 水平和垂直均重复 */
}

1. background-size： 这个属性用来设置背景图片的尺寸大小，可以使用像素值、百分比、关键字（cover和contain）等。

例如：

div {
  background-image: url("img/bg.jpg");
  background-size: 100px 50px; /* 宽度100像素，高度50像素 */
  background-size: 50% auto; /* 宽度50%，高度自动 */
  background-size: cover; /* 图片完全覆盖，可能会裁剪 */
  background-size: contain; /* 图片自适应，可能不填满容器 */
}

1. background-position： 这个属性用来设置背景图片的位置，可以使用像素值、百分比、关键字（top、bottom、left、right和center）等。

例如：

div {
  background-image: url("img/bg.jpg");
  background-position: 0 0; /* 水平和垂直方向均居左上 */
  background-position: center; /* 水平和垂直方向均居中 */
  background-position: 50% 50%; /* 水平和垂直方向均居中 */
  background-position: 100px 50px; /* 水平方向向右100像素，垂直方向向下50像素 */
}

1. opacity： 这个属性用来设置元素的透明度，取值范围为0到1之间的数值，0表示完全透明，1表示完全不透明。

例如：

div {
  opacity: 0.5; /*