微信小程序悬浮半透明圆角框

最新推荐文章于 2024-07-05 17:38:05 发布

学姐人头一

最新推荐文章于 2024-07-05 17:38:05 发布

阅读量2.8k

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/YXun1111314/article/details/126241445

版权

本文介绍了在微信小程序开发中创建悬浮且半透明的圆角框的方法。通过CSS的background-color: rgba()实现背景透明，设置position: fixed进行元素的固定定位，以及利用line-height和border-radius创建圆角效果。

摘要由CSDN通过智能技术生成

在微信小程序开发过程中，我们一般会在页面的下方固定一个悬浮。那么下面就简单讲解下如何具体的实现。先上下效果图，这边可以看到下方有个固定的悬浮按钮。

<view class="consultBtn">
  <t-icon name="chat" class="icon"/>
  <view class="tip">在线咨询</view>
</view>

.consultBtn {
  position: fixed;
  width: 200rpx;
  height: 50rpx;
  bottom: 120rpx;
  left: 26rpx;
  background-color: rgba(2, 2, 2, 0.4);
  border-radius: 30rpx;
  line-height: 50rpx;
  display: flex;
  justify-content: center;
}
.consultBtn .tip{
  color: white;
  font-size: 26rpx;
  font-weight: lighter;
}
.consultBtn .icon {
  padding: 10rpx 6rpx;
  color: white;
}

在CSS中运用background-color: rgba(2, 2, 2, 0.4);使得盒子背景半透明.

background-color:rgba(0,0,0,0~1