如何将背景图像设置在除法的左侧?

时间:2015-12-25 08:48:33

标签: html css

下面的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>

1 个答案:

答案 0 :(得分:2)

像这样JS Fiddle

&#13;
&#13;
#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 */
}
&#13;
<div id='er'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores soluta accusamus dolorum ut odit voluptatem, autem sint!
</div>
&#13;
&#13;
&#13;