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

我有这样的：

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

，我想通过使用CSS一个16x16图像添加到了左边。这是可能的，或者我应该只是手动添加此图像像这样：

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

我宁愿没有手动改变所有这就是为什么我想通过CSS做的地方。

谢谢！

来源

2009-04-09 Chris Conway

109

.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）。

来源

2009-04-09 18:33:53

可能要指定图像的位置。但否则，好的电话。 – 2009-04-09 18:35:34

如果你确定行高足以垂直放置图像，你可以避免将display属性设置为block，否则你会[可能]看到它被砍掉，并想把它变成块元素。 – 2009-04-09 18:38:38

您可以使用优化选项而不是前两行： background：url（'somewhere.jpg'）no-repeat; – 2014-11-09 22:43:49

试着这么做：

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

}

来源

2009-04-09 18:38:49 Traingamer

非常简单的方法：

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

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

编辑

不过不要在大型网站使用。：在伪元素在性能方面是可怕的。

来源

2013-08-16 19:18:39 tomasz86

这个伟大的工程

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

来源

2014-07-15 05:19:48

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

回答

相关问题