将精灵图标添加到标签。有没有办法为精灵设置宽度/高度，然后为标签设置第二个 w/h？答案

【问题标题】：Add sprite icon to a label . Is there a way to set width / height just for the sprite and a second w/h to the label?将精灵图标添加到标签。有没有办法为精灵设置宽度/高度，然后为标签设置第二个 w/h？
【发布时间】：2017-03-10 17:47:27
【问题描述】：

这可能是一个新手问题，但是是否可以将精灵图标添加到带有文本的标签中？

例如：

<label class="icon">labeltext</label>

<style>
 .icon {
    width: 30px
    height: 30px;
    background: url("icon.png") no-repeat scroll 0 0 transparent;
 }
</style>

当我将宽度设置为 30 像素时，没有显示整个文本。有没有办法在 div / label / span 中有一个精灵图标和一个文本？

我的真实代码看起来更像这样

<span class="additional-background">
    <span>text text text text</span>
</span>

如果我在精灵图标所在的附加背景上设置宽度/高度，您将看不到文本范围内的文本。如果我在文本跨度上设置宽度，我将无法在“附加背景”上进行点击事件。

附加 我需要设法在图标而不是文本上设置点击事件

【问题讨论】：

标签： css

【解决方案1】：

试试这个：

HTML

<label class="icon">labeltext</label>

CSS

.icon {
  display: inline-block;
  line-height: 30px;
  padding-left: 30px;
  background: url("icon.png") no-repeat scroll 0 0 transparent;
}

【讨论】：

谢谢，但是如果我想在图标而不是文本上进行点击事件该怎么办。
那么您需要按照<a href="foo"><img src="icon.png"/></a><span>text</span> 的行进行标记。请注意，<label> 在这里不是一个好选择，因为它应该与输入元素绑定，并提供更大的点击区域。

【解决方案2】：

要实现这一点，您必须在 class="additional-background" 中设置要用作图标的图像的背景位置，并为文本所在的内部跨度提供填充。

你可以把背景图片的位置放在这里像

例如：background: url("icon.png") no-repeat scroll 10px 10px transparent;

【讨论】：

【解决方案3】：

好的，当您声明您需要悬停状态时，我修改了我的原始答案。因此，您的图像需要将正常状态 + 悬停状态保存为一张图像，然后是这样的：

HTML

<a class="clickme" href="yourpage.html"> Button text </a>

CSS

.clickme{
width:150px;
height:50px;
background:url ('image.jpg') no-repeat;
background-position: top; /* active state */
display:block;
}

.clickme:hover{
background-position:bottom; /* Moves the image on hover */
}

我不确定你为什么需要一个标签，我只使用一个“类”。上面的代码允许按钮处于悬停状态，并对文本执行任何操作。您还可以通过向精灵添加第三个变体来获得 :focus 用于点击。

【讨论】：

【解决方案4】：

试试这个方法：

<div id= background-image">
text text text text
</div>

#backround-image
{
    overflow:hidden;
    width:50px;
    height:50px;
}

【讨论】：