Question

如何通过css将图像添加到某些文本？

我有这个：

<span class="create">Create something</span>

我希望通过使用css在其左侧添加一个16x16图像。这是可能的还是我应该像这样手动添加这个图像：

<span class="create"><img src="somewhere"/>Create something</span>

我宁愿不必手动更改所有地方，这就是我想通过css进行操作的原因。

谢谢！

Answer 1

.create
{
background-image: url('somewhere.jpg');
background-repeat: no-repeat;
padding-left: 30px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

使用填充和可能的边距，直到获得所需的结果。您还可以使用“背景位置”或完整定义“背景”（link to w3）来播放背景图像的位置（*向Tom Wright点头）。

Answer 2

非常简单的方法：

.create:before {
content: url(image.png);
}

适用于所有现代浏览器和IE8 +。

修改

不要在大型网站上使用它。：在伪元素之前，在性能方面是可怕的。

Answer 3

尝试类似：

.create
 { 
  margin: 0px;
  padding-left: 20px;
  background-image: url('yourpic.gif');
    background-repeat: no-repeat;

}

Answer 4

这很棒

.create:before{
    content: "";
    display: block;
    background: url('somewhere.jpg') no-repeat;
    width: 25px;
    height: 25px;
    float: left;
}

Answer 5

用于在文本长度未知的情况下始终在文本之前添加背景图标。

.create:before{
content: "";
display: inline-block;
background: #ccc url(arrow.png) no-repeat;
width: 10px;background-size: contain;
height: 10px;
}

通过css将文件添加到文本左侧

5 个答案: