怎么给html底部加个遮罩,div+css实现图片底部透明遮罩文字标题

可以使用以下的HTML和CSS代码来实现图片底部透明遮罩文字标题：

HTML代码：

<div class="image-container">
  <img src="your-image-url" alt="your-image-alt-text">
  <div class="overlay">
    <h2>Your Title Here</h2>
  </div>
</div>

CSS代码：

.image-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.overlay h2 {
  margin: 0;
}

.image-container:hover .overlay {
  transform: translateY(-100%);
}

解释一下：

首先，我们使用一个 `div` 元素作为图片容器，并设置其为相对定位。接着，我们在容器内部放置一个 `img` 元素用于显示图片，并设置其为块级元素，宽度为100%，高度自适应。

接下来，我们再在容器内部放置一个 `div` 元素，用于显示标题。我们将其设置为绝对定位，底部对齐，左侧对齐，宽度为100%，背景颜色为半透明黑色，文字颜色为白色，内部添加10px的内边距，并设置盒模型为 `box-sizing: border-box`，以便于我们在设置内边距时不会影响元素的实际宽度。

最后，我们使用CSS3的过渡效果，当鼠标悬停在容器上时，将标题向上移动，露出图片底部的部分，从而实现了透明遮罩效果。

需要注意的是，以上CSS代码中的 `rgba(0, 0, 0, 0.6)` 表示半透明黑色，其中最后一个参数 `0.6` 可以根据需要进行调整。同时，需要将代码中的 `your-image-url` 和 `your-image-alt-text` 替换为实际的图片 URL 和替代文本。