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

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

css
  •  74
  • Chris Conway  · 技术社区  · 15 年前

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

    我得到了这个:

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

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

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

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

    谢谢!

    4 回复  |  直到 15 年前
        1
  •  116
  •   Jon Smock    15 年前
    .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 )

        2
  •  29
  •   tomasz86    10 年前

    非常简单的方法:

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

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

    编辑

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

        3
  •  9
  •   Traingamer    15 年前

    尝试以下方法:

    .create
     { 
      margin: 0px;
      padding-left: 20px;
      background-image: url('yourpic.gif');
        background-repeat: no-repeat;
    
    }
    
        4
  •  6
  •   Darren Cook    9 年前

    这个很管用

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