[分享]css中怎么给图片上加文字

在 CSS 中，我们可以通过在图片上添加文字来增强图片的视觉效果和信息传达效果。本文将介绍几种方法来实现在图片上添加文字的效果。一、使用伪元素 + 普通 icon 字体实现图标加文字这种方法比较简单，...

在 CSS 中，我们可以通过在图片上添加文字来增强图片的视觉效果和信息传达效果。本文将介绍几种方法来实现在图片上添加文字的效果。
一、使用伪元素 + 普通 icon 字体实现图标加文字
这种方法比较简单，可以通过设置伪元素的 content 值来实现在图片上添加文字的效果。通过设置图标字体，可以兼容性更好，而且图标颜色和字体颜色可以更好地协调。代码示例如下：

.icon-text {
  display: inline-block;
  position: relative;
  font-size: 0;
  vertical-align: middle;
}

.icon-text:before {
  content: "\e600";
  font-family: 'icomoon';
  font-size: 16px;
  color: #ccc;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.icon-text p {
  display: inline-block;
  font-size: 14px;
  color: #333;
  vertical-align: middle;
} 

二、使用背景图加 padding 实现图片加文字
通过给一个块级元素设置背景图，并设置 padding 值，然后在 padding 区域内添加文字来实现图片加文字的效果。代码示例如下：

.bg-icon {
  display: inline-block;
  background: url('icon.png') no-repeat center;
  background-size: contain;
  padding: 40px;
  color: #333;
  font-size: 14px;
} 

三、 使用伪元素 + data 属性实现图片加文字
同样是使用伪元素，不过这次使用 data 属性来传递需要展示的文字信息。这种方法在性能方面较为优秀，并且与 HTML 代码解耦。代码示例如下：

.data-icon {
  display: block;
  position: relative;
  width: 160px;
  height: 160px;
}

.data-icon:hover:after {
  content: attr(data-title);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  line-height: 160px;
  font-size: 14px;
} 

总结：
通过以上三种方法，我们可以简单地实现在图片上添加文字的效果。在实际项目中，不同的需求和场景会要求我们使用不同的方案，可以根据具体情况灵活选择。