h5 图片加遮罩

在 HTML5 中，可以使用 CSS 来给图片添加遮罩效果。具体的实现方式如下：

1. 在 HTML 中创建一个 `div` 元素和一个 `img` 元素，其中 `div` 元素作为遮罩层，`img` 元素作为需要添加遮罩效果的图片。

<div class="wrapper">
  <img src="your-image-url.jpg" alt="your-image">
  <div class="overlay"></div>
</div>

2. 在 CSS 中为 `img` 元素设置 `position: relative;`，为 `div` 元素设置 `position: absolute;` 和 `z-index: 1;`，并设置 `div` 的宽高和背景颜色。

.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

这里使用了 `rgba()` 函数来设置透明度为 0.5 的黑色背景。

3. 最后，为 `img` 元素设置 `z-index: 2;`，使其在遮罩层的上方显示。

.wrapper img {
  position: relative;
  z-index: 2;
}

完整的代码如下：

<div class="wrapper">
  <img src="your-image-url.jpg" alt="your-image">
  <div class="overlay"></div>
</div>

.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.wrapper img {
  position: relative;
  z-index: 2;
}

以上代码可以实现一个带有黑色半透明遮罩的图片效果。你也可以自己调整遮罩层的颜色和透明度来实现不同的效果。