css如何在图片上显示文字

在网站设计中，图片是不可缺少的一部分。但如何在图片上显示文字呢？这时就需要使用CSS技巧了。下面是一些常用的方法：

/* 方法一：文本框覆盖 */
/* 在图片上创建一个绝对定位的文本框，并设置背景透明 */
.image {
  position: relative;
}
.image:hover .text {
  display: block;  /* 鼠标悬停时显示文本 */
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(255,255,0.8);  /* 透明度 */
  padding: 10px;
  display: none;   /* 默认隐藏文本 */
}

/* 方法二：背景图转换 */
/* 将背景图片设置为渐变色，利用背景文本覆盖 */
.Box {
  background-image: linear-gradient(rgba(0,0.5),rgba(0,0.5)),url(image.jpg);
  color: #fff;  /* 文本颜色 */
  padding: 20px;
}

/* 方法三：图像遮罩 */
/* 利用伪元素创建一个遮罩，将文本放置在遮罩上 */
.mask {
  position: relative;
  display: inline-block; /* 只占用所需的空间 */
}
.mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0.5); /* 遮罩颜色 */
}
.mask:hover::before {
  display: none; /* 鼠标悬停时隐藏遮罩 */
}
.mask span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  z-index: 1; /* 使文本位于遮罩之上 */
}

以上三种方法都可以在图片上显示文本。具体选择何种方法，可以根据具体情况和个人偏好来决定。