uniapp小程序，css 实现底层图片加灰色蒙版，顶层按钮保持高亮效果

实现效果如下图：代码实现：<view class="wait-box"><image :src="imgSrc" class="wait-img"></image><view class="wait-btn">敬请期待</view></view>.wait-box {box-sizing: border-box;width:

keepfitt

2814人浏览 · 2021-05-19 10:12:38

keepfitt · 2021-05-19 10:12:38 发布

实现效果如下图：
在这里插入图片描述
代码实现：

 <view class="wait-box">
      <image :src="imgSrc" class="wait-img"></image>
      <view class="wait-btn">敬请期待</view>
 </view>

 .wait-box {
    box-sizing: border-box;
    width: 343rpx * 2;
    height: 300rpx;
    background: #000;
    box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
    font-size: 28rpx;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    .wait-img{
      width: 100%;
      height: 100%;
      opacity: 0.6;
      filter: alpha(opacity=60);
    }
    .wait-btn {
      width: 84rpx * 2;
      height: 26rpx * 2;
      line-height: 26rpx * 2;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -84rpx;
      margin-top: -26rpx;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
      background-image: linear-gradient(90deg, #f6ab00 0%, #eb6120 100%);
      border-radius: 26rpx;
    }
  }