微信小程序 修改button为圆形按钮并设置图片

现在一般来说，用户没有授权时候，头像会显示一个默认图，点击时候出现授权页面。但是微信小程序授权功能现在只能用button设置，所以延伸出这个需求。实现的效果如下:
这里有两种方式，如果第一种不好使的话，尝试第二种：

修改button默认样式

代码如下:

wxml:

	<view class="mine_user_container">
		<block  class="mine-userinfo">
			<view class="mine-userinfo-left">
				<button class="mine-nouserinfo-avatar" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" style="background-image:url(../../img/mine_no_login_head.png);" size="mini">>按钮</button>
			</view>
			<view class="mine-nouserinfo-msg">
				<text class="mine-userinfo-name">请授权登陆～</text>
			</view>
		</block>
	</view>

wxss:

.mine_user_container{
  background-color: #FDEBE7;
  height: 272rpx;
  display: flex;
  padding: 0 40rpx;
}

.no_userinfo{
  width: 144rpx;
  height: 144rpx;
  background-color: violet;
  border-radius: 50%;

}
.mine-userinfo-left{
  margin: 0 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mine-nouserinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  flex-shrink: 0;
  background-repeat:no-repeat;
  background-position: center;//定位图片位置
  color:transparent;
}

.mine-nouserinfo-msg{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mine-nouserinfo-avatar::after {
  border: none;//移除边框
}

.mine-userinfo{
  align-items: center;
  display: flex;
  flex-direction: row;
}

.mine-userinfo-msg{
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-top: -40rpx;
}

设置背景色

如果第一种方式不好用的话，那么就把button的背景色设置为透明的，然后里面自定义图形。代码如下:
wxml:

<button class="mine-nouserinfo-avatar"  open-type="getUserInfo" size="mini"><image class="btnImg" src="../../img/mine_no_login_head.png"></image></button>

wxss:

.mine-nouserinfo-avatar {
  background-color:transparent;
}
.mine-nouserinfo-avatar::after {
  border: none; 
}
.btnImg {
  width: 128rpx;
  height: 128rpx;
}

参考链接：

背景设置：https://www.w3school.com.cn/css/css_background.asp