Question

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

所以我有以下课程： -

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

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

你可以帮助我，让文字doenot重叠图像和图像很好地显示？

提前致谢

Answer 1

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

Answer 2

你有一个jsfiddle看清楚吗？

为什么不把文字漂浮在图像周围？

Answer 3

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

padding: 5px 5px 5px 10px;

填充从顺时针方向向上移动到左侧，因此示例中的顶部，右侧和底部填充设置为5 px，左侧填充设置为10。

Answer 4

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

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

Answer 5

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

Answer 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;
}

我希望这是有效的。

图像和文字重叠

6 个答案: