如何将背景图像设置在分区的左侧？

Question

下面的div 现在显示错误消息我想添加一个将出现在错误消息之前的图像。它只是一个小错误图像，我想出现在div 的左侧，以便它出现在错误文本之前。我试图用背景图像来做，现在文本与图像重叠，因为图像是文本的背景。有什么方法可以使错误消息而不是重叠跟随图像。

<div id='er'><?php echo $er; ?></div>
<style>
#er{font-size: 14px;color:blue; background: url(img_stop.gif);
background-size: 35px 35px;
background-repeat: no-repeat;}
</style>

Answer 1

类似JS Fiddle

#er{
  font-size: 14px;
  color:blue;
  min-height:45px; /* so that the image will always be shown even for short error messages */
  background: transparent url(http://www.willowsigns.com/images/products/reflective-stop-sign-circular-icon-600mm-dia-Ehwf.png) no-repeat;
  background-position: 5px center; /* image positioned 5px of the 0 left and centered top */
  background-size: 35px 35px;
  border:1px solid red;
  padding:5px 5px 5px 45px; /*giving left padding as 45, 35px for the image, and 5px on each side */
}

<div id='er'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores soluta accusamus dolorum ut odit voluptatem, autem sint!
</div>