网页不透明的照片标题 - HTML

在HTML中，我们可以使用<img>标签来将一张图片显示在网页中。

如果我们想让图片有不透明的标题，可以使用以下HTML代码：

<div class="image-container">
  <img src="path/to/image.jpg" alt="Image Alt Text">
  <div class="image-title">Image Title Text</div>
</div>

其中，.image-container用来包裹整个图片和标题，.image-title用来显示标题。

CSS代码则可以这样写：

.image-container {
  position: relative;
}
.image-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
}

其中，.image-title使用了position: absolute;来使其脱离文档流，可以随意定位；bottom: 0;使其位于图片底部；padding: 8px;用来增加标题与背景之间的间距；background-color: rgba(0, 0, 0, 0.7);用来设置背景颜色，其中rgba中的最后一项0.7表示不透明度为70%；color: #fff;用来设置文字颜色为白色；font-size: 14px;用来设置文字大小。

最终效果如下：

Random Image Title

<div class="image-container">
  <img src="https://picsum.photos/id/94/200/300" alt="Random Image">
  <div class="image-title">Random Image Title</div>
</div>

以上就是在HTML中实现网页不透明的照片标题的方法，希望对您有所帮助。