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

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

代码如下:

wxml:

	
		
			
				>按钮
			
			
				请授权登陆～
			
		
	

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;
}

参考链接：

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