css怎么为图片加标签

在网页设计中，我们时常需要为图片加上标签，例如对于产品图片加上产品名称，对于新闻图片加上标题等等。通过CSS，我们可以很方便地为图片添加标签，同时还能控制标签的位置、样式、动画等属性。

下面是一个例子，我们为一张图片添加了一个标签“风景图片”，并将其置于图片的右上角：

HTML代码：
<div class="image-container">
  <img src="scenery.jpg" alt="风景图片">
  <span class="label">风景图片</span>
</div>

CSS代码：
.image-container {
  position: relative;
  width: 400px;
  height: 300px;
}

.label {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: black;
  color: white;
  padding: 5px;
  font-size: 16px;
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}

.label:hover {
  opacity: 1;
}

其中，我们通过position属性将.image-container设置为相对定位，使得.label能够以其为参照物进行绝对定位。同时，我们设置了.label的top和right属性，将其置于图片的右上角。我们还设置了标签的样式，包括背景色、文字颜色、字体大小等等。通过opacity属性，我们为标签添加了透明度，同时还为其添加了hover效果。

通过这样的方式，我们可以为图片添加任意标签，并对其进行自由控制，从而使得网页更具有交互性和美观性。