css - CSS圆 Angular

我有三个图像。一为左，一为右，一为中。
这就是我所拥有的：

 <style type="text/css">
 img {border:0}

.bl {background: url(images/backer_left.gif) top left no-repeat; height:47px; }
.br {background: url(images/backer_right.gif) top right no-repeat; height:47px;}
.tr {background: url(images/backer_alt.gif) ; margin:0 4px 0 4px; font-size:12px; height:47px;}
.trText { padding:10px; }
.clear { clear:both; }
</style>
<div class="bl">
  <div class="br">
    <div class="tr">
        <div class="trText">lay lay lomm</div>
    </div>
   </div>
</div>
<div class="clear">&nbsp;</div>

我看不到左右图像。只是重复的backer_alt.gif。我究竟做错了什么？
谢谢

已编辑
此版本适用：

 <style type="text/css">
 img {border:0}

 .bl {background: url(images/backer_left.gif) top left no-repeat; height:47px; }
 .br {background: url(images/backer_right.gif) top right no-repeat; height:47px;}
 .tr {background: url(images/backer_alt.gif) ; margin:0 4px 0 4px; font-size:12px; height:47px;}
   .trText { padding:10px; }
 .clear { clear:both; }
 </style>
<div class="bl">
    <div class="br">
        <div class="tr">
            <div class="trText">lay lay lomm</div>
        </div>
    </div>
 </div>
 <div class="clear">&nbsp;</div>

最佳答案

尝试将.tr的margin设置为10px，而不是其padding。您可能还需要将background-position上的.br设置为top right，以便它显示在正确的位置。