css - Css - 如何在文本框外添加图像（在左侧但触摸框）

Question

在我的网站http://goo.gl/ok43H上，我想在每个白色文本框旁边添加一个小“+”图标（我在这里制作了一个我想要实现的模型：http://goo .gl/ftRpZ）但我不知道该怎么做。你有什么建议？非常感谢，

这是html代码：

<div class="presentation-plusbox">
<p>Expertise dans l'industrie</p>
<p>blblablabla</p>
<p>blabla</p>
</div>

这是css代码：.presentation-plusbox

{
    width: 500px;
    background-color:#FFFFFF;
    padding:10px;   
    margin-left:25%;
    color:#000000;
    margin-bottom:8px;
    opacity:0.95;
    filter:alpha(opacity=95); /* For IE8 and earlier */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Answer 1

将您的 + 框定义为内部的 div.presentation-plusbox

还添加position: relative到.presentation-plusbox

然后将以下css应用到加号框

.plusBox {
  position: absolute;
  top: 20px;
  left: -50px;
}

当然，您需要进行调整top并left使其恰到好处。

Answer 2

您可以使用:before- http://jsfiddle.net/fgRRw/

div:before {
    content: "+";
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    background: orange;
    color: #fff;
    display: block;
    left: -30px;
    position: absolute;
}

请注意 - IE7 及以下链接:before不支持

Answer 3

我没有尝试过，但这应该可以。

p { position: relative; }
p:after { 
  height: 20px;
  width: 20px;
  background-image: url('image.url.goes.here.jpg');
  position: absolute;
  top: 5px;
  left: -20px;
}