小程序中CSS实现图片蒙层覆盖并添加图标

我正在参加「掘金·启航计划」

公司的小程序页面上需要做个已完成的训练计划的样式，非常简单的css小技巧分享给大家。

先给大家看看UI稿的效果

那么如何实现呢？

步骤和思路：

1. 首先用一个View将图片和图标包裹，设置定位为相对定位
2. view的背景设置为黑色
3. 图片设置透明度，实现蒙层效果
4. 图标设置为绝对定位，并使用transfrom实现垂直水平居中

以下是代码的实现：

<View className={styles.imageView}>
    <Image
      src={item?.image}
      className={styles.image}
    />
    <Passed color="white" size={25} className={styles.icon} />
</View>

.imageView {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    margin-right: 8px;
    background-color: #000;
    position: relative;
  }
  .image {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    margin-right: 8px;
    opacity: .56;
    filter: alpha(opacity=56);
  }

  .icon {
    position:absolute;
    z-index:2;
    text-align:center;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

注意:

1. 主要是transfrom的小技巧能够实现垂直水平居中的效果。
2. 如果图片有圆角，那么View也要设置圆角哦，不然四角会露出黑色背景。

如果想实现蒙层上文字，道理是一样的，把图标替换成文字就可以。

图片的引入方式

在项目开发过程中发现图片的引入方式很有不同： 如果是引入本地图片，直接<Image src={'../assets/image.png'} /> 并不生效， 如果在文件顶部引入

// 引入
import img from '../../assets/image.png';
// 代码中使用
<Image src={img} />

是可以的。 或者<Image src={require('../assets/image.png'}) />也是可以实现的。 希望能够帮到大家。