代码之家 › 专栏 › 技术社区 › Chris Conway

通过CSS将图像添加到文本左侧

css

Chris Conway · 技术社区 · 16 年前

如何通过CSS向某些文本添加图像?

我得到了这个:

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

我想用css在左边添加一个16x16图像。这是可能的,还是应该像这样手动添加此图像:

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

我不想手动更改所有的位置,这就是为什么我想通过CSS来更改的原因。

谢谢!

4 回复 | 直到 16 年前

116

Jon Smock 16 年前

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

在得到你想要的结果之前,你可以玩填充和可能的空白。您还可以使用“背景位置”来播放背景图像的位置(*nod to tom wright),或者完全定义“背景”。( link to w3 )

tomasz86 11 年前

非常简单的方法:

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

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

编辑

但不要在大型网站上使用。在性能方面,伪元素之前的:非常糟糕。

Traingamer 16 年前

尝试以下方法:

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

}

Darren Cook 10 年前

这个很管用

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

推荐文章