头像背景虚化&按钮去边框

「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」。

一个微信端的管理系统，我想个人中心永远都不会缺席，用登录就一定有头像，那么头像背景虚化是怎么做的呢

首先我们在js中把图片路径和名字保存起来

 data: {
    imgUrl: "../../imgs/kshan/头像.jpg",
    name: "粉红豹"
  },

<view class="wrap">
  <image class="user_bg" src="{{imgUrl}}"></image>
  <view class="user_info">
    <image class="user_icon" src="{{imgUrl}}"></image>
    <view class="user_name">{{name}}</view>
  </view>
</view>

显示在页面中是这个样子的

我们将包裹头像背景和头像图片的外层容器wrap做一个相对定位，这样是使头像图片可以定位在背景上方显示

这里height: 50vh; 的意思是占屏幕高度50%（vw代表手机宽度, vh代表手机高度） 其中1rpx = 0.5px , 将头像图片使用弹性盒模型居中显示

filter 属性定义了元素(通常是 img )的可视效果(例如：模糊与饱和度)。

比较常见方法的有：

• blur() 给图像设置高斯模糊，值越大越模糊。
• brightness() 使图片看起来更亮或更暗
• contrast() 调整图像的对比度
• drop-shadow() 给图像设置阴影效果

.wrap{
  position: relative;
  .user_bg{
    height: 50vh;
    filter: blur(10rpx);
  }
  .user_info{
    position: absolute;
    width: 100%;
    top: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;   
    text-align: center;
    .user_icon{
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
    }
    .user_name{
      color: white;
      margin-top: 40rpx;
      font-size: 40rpx;
    }
  }
}

我们这里再给个人中心一个设置的按钮，打开授权设置页 微信小程序button 的 open-type 微信开放能力可通过 developers.weixin.qq.com/miniprogram… 进行查看

<view class="settingButton">
  <button open-type="openSetting" class="iconfont icon-shezhi1"></button>
</view>

我们将定位在右上角，background:transparent设置背景透明，取消边框属性发现它还是有一个边框存在

.settingButton{
  position: absolute;
  top: 1%;
  right: 3%;
  button{
    width: 80px;
    height: 55px;
    background: transparent;
    border: none;
    color: var(--themeColor); 
    font-size: 23px;
    text-align: right;
  }
}

解决方法是改成使用伪元素::after给渲染后的button再设置一个边框属性，就可以成功隐藏了

  button::after{
    border: none;
  }

这样我们就成功做好了头像虚化和取消按钮边框属性的效果啦