图像和文本重叠答案

【问题标题】：Image and Text overlapping图像和文本重叠
【发布时间】：2013-08-09 17:59:03
【问题描述】：

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

所以我有以下课程：-

/* 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 />

图像未显示完整的高度和宽度。

能否请您帮我，使文本不会与图像重叠并且图像显示得很好？

提前致谢

【问题讨论】：

标签： css image

【解决方案1】：

你应该在你的锚标签中使用图片标签。然后可以设置css来获取文字和图片的正确位置。

【讨论】：

【解决方案2】：

您可以使用填充（在本例中为左侧）和背景图像位置，为锚文本提供不重叠的空间。

HTML

<a class="showFilesForFolder FolderOpen"><span>Folder open</span></a>
<br />
<br />
<a class="showFilesForFolder FolderClose"><span>Folder close</span></a>

CSS

a {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    // The trick is here:
    padding-left: 30px;
}

/* Folder Icons CSS */
 .FolderOpen {
    width: 150px;
    height: 50px;
    // Position your background image
    background: url("http://www.thenetadvantage.co.uk/wp-content/themes/netadvantage/images/icon-linkedin.png") no-repeat top left;

}
.FolderClose {
    width: 150px;
    height: 50px;
    // Position your background image
    background: url("http://computer-forensics.sans.org/images/design/custom/icons/twitter-icon.png") no-repeat top left;
}

工作示例：http://jsfiddle.net/qg7Ns/2/

【讨论】：

【解决方案3】：

你有 jsfiddle 可以看清楚吗？

为什么不让文字围绕图片浮动？

【讨论】：

这是一个答案吗？它应该是一个评论。
问题是不要重叠文本和图像。怎么不是答案？
图片作为背景，所以你的评论没有意义。
您说这是一个错误的答案。您同意，如果它不是背景，那么它将是一个答案，因此它是一个您不厌其烦地发表评论的答案？答案包括将结构从背景更改为图像。由于没有给出使用背景的理由，因此使用图像可能会解决所有问题并提供更好的性能，具体取决于。我不明白你的意思。
关于这个问题的具体答案很糟糕。我并不是说这是一个糟糕的解决方案。如果有办法（并且有）回答保持原始想法的问题，那就是这样做的方法，而不是让 OP 更改整个代码，除非它真的很糟糕和无效。

【解决方案4】：

使用填充和/或文本缩进，调整填充以满足您的需要，

padding: 5px 5px 5px 10px;

内边距从上顺时针到左，因此示例中的上、右和下内边距设置为 5 px，左内边距设置为 10。

【讨论】：

【解决方案5】：

尝试在锚标签上使用display: block。

【讨论】：

【解决方案6】：

使用这个：

.folderClose {
    display:inline-block;
    width:40%;
    height:50px;
    text-align:center;
  background-image: url('../images/icon_folder_24x24_closed.png');
  background-repeat:no-repeat;
  overflow: hidden;
}

我希望这行得通。

【讨论】：