小程序修改weiui-uploadimg的+号图标为自定义图片

最新推荐文章于 2023-10-24 10:27:15 发布

原创最新推荐文章于 2023-10-24 10:27:15 发布 · 226 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

工具专栏收录该内容

30 篇文章

订阅专栏

文章介绍了如何将图片转化为Base64编码，并在weui.css文件中修改.weui-uploader__input-box样式，以替换上传按钮的图标。具体步骤包括调整图片尺寸、设置背景图像的位置和大小，以及应用no-repeat属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据需求，修改weiui-uploadimg的+号图标

1、在图片转 BASE64 编码 | 菜鸟工具把图片转换成base64位

２、在weui.css中修改以下代码

.weui-uploader__img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 20rpx;
}

.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 100px;
  height: 100px;
  /* border: 1px solid #d9d9d9; */
  background-color: #F4F3F6;
  border-radius: 20rpx;
  background-image: url("图片base64");
  background-position: 50% 50%;
  /*这个是按从左往右，从上往下的百分比位置进行调整*/
  background-size: 50% 40%;
  /*按比例缩放*/
  /*background-size: 100px 100px;!*这个是按数值缩放*!*/
  background-repeat: no-repeat;
}