css - 图片和文字重叠

Question

我有一个 anchor 标签，我想根据情况给 anchor 标签的背景设置一个图标。

所以我有以下类(class):-

/* Folder Icons CSS */
.FolderOpen {
  width: 150px;
  height: 50px;
  background-image: url(../images/icon_folder_24x24.png);
  background-repeat:no-repeat;
  overflow: hidden;
}

.FolderClose {
  width: 150px;
  height: 50px;
  background-image: url(../images/icon_folder_24x24_closed.png);
  background-repeat:no-repeat;
  overflow: hidden;
}

图片大小为24x24

我的 achor 标签如下:-

<a class="showFilesForFolder FolderClose" data-folderid="@folder.FolderId" data-personid="@Model.PersonId" style="cursor:pointer; text-decoration:none;"> <span>@folder.FolderName</span></a><br />

图像未显示全高和全宽。

你能帮我让文字不与图像重叠并且图像显示得很好吗？

提前致谢

Answer 1

您应该在 anchor 标记内使用图像标记。然后你可以设置css来获取文本和图像的正确位置。