Question

我有一些想要与文字一起显示内嵌的图标，但文字有几种不同的尺寸，我希望图标大小与文字行高相匹配。

目前我正在使用CSS背景精灵来制作图标。我尝试了transform: scale和其他一些background-size的恶作剧，但它似乎没有做正确的事。

这是可行的，还是我需要将其分成小图像然后可以设置为正确的height？

Answer 1

假设您正在使用CSS3，您知道文本的大小，并且您的图像是方形的（例如50px x 50px），那么您可以使用background-size，CSS变量和如果你愿意，甚至transform。看看下面的小提琴，以及我在这里插入的代码（如果小提琴不起作用）。我使用的示例文本高度为14px，源图像为300x300px，使用变量缩小为14x14px。

https://jsfiddle.net/u82skrhe/5/

<强> HTML

<div id='icon' class='one'></div>
<p class='one'>
  this is some of my text here
</p>

<强> CSS

:root{
  --font-size-1: 14px;
}

p.one{
  font-size: var(--font-size-1);
  margin-left: 20px;
}

#icon.one{
  width: var(--font-size-1);
  height: var(--font-size-1);
  background: url("http://placehold.it/300x300");
  background-size: 100% 100%;
  float: left;
}

我可以让css精灵匹配线高吗？

1 个答案: