0

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

所以我有以下课程： -

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

我的主标记如下：-

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

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

你能帮我，这样文本不会与图像重叠并且图像显示得很好吗？

提前致谢

4

6 回答 6

2

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

于 2013-08-09T09:57:04.383 回答
0

你有一个 jsfiddle 看清楚吗？

为什么不只是将文本浮动在图像周围？

于 2013-08-09T09:39:50.490 回答
0

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

padding: 5px 5px 5px 10px;

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

于 2013-08-09T09:41:22.667 回答
0

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

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/

于 2013-08-09T09:52:44.097 回答
0

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

于 2013-08-09T09:53:03.260 回答
0

用这个 ：

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

我希望这行得通。

于 2013-08-09T09:53:32.293 回答