一个div内的文本和背景图像

Question

我有一个div消息。它有一个内部div，带有文本和相应的图标（错误，警告等）。

<div id="outer">
  <div id="inner"><!-- contains the styles for background images (icon) -->
    message text (default)
  </div>
</div>

我也有javascript（我无法更改js）：

var field = getElementById("outer");
field.innerHTML = "message text (specific)";

这个js删除了div＃inner 如果我制作一个div，那么我应该移动背景图像：

background-position: left 20px center;

在background-position中使用px是CSS3功能。它在CSS3中不起作用。
案例不正确（IE8）

正确（Firefox，Chrome等）

如何在没有内部div的情况下将div中的背景图像移位？ JS代码（上面）应该正常工作（我无法修复js） 的更新：
我希望只有一个div（外部），并删除内部。

Answer 1

您可以使用伪效果来实现此目的：

jsfiddle

---

由于您可能正在使用不同的图像，因此您可以使用它：

＆＃13;

＆＃13;

var field = getElementById("outer");
field.innerHTML = "message text (specific)";

＆＃13;

#outer{
    width:200px;
    background:gray;
    border:5px solid black;
    position:relative;
    text-align:center;
    padding:20px;
}
#inner:after{
    content:"";
    height:20px;
    width:20px;
    position:absolute;
    left:10%;
  
}
.redClass:after{
      background:red;    
}
.blueClass:after{
      background:blue;    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner" class="blueClass"><!-- contains the styles for background images (icon) -->
    message text (default)
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

其中＆＃39; redClass＆＃39;或＆＃34; blueClass＆＃34;可以为特定图标添加（即在jquery中切换类），例如，＆＃39;错误＆＃39;或者＆＃39; info＆＃39;