CSS 圆角

发布于 2024-11-20 00:42:57 字数 1400 浏览 2 评论 0原文

我有三张图片。一张在左边，一张在右边，一张在中间。这就是我所拥有的：

 <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>

原文

I have three images. One for the left, one for the right and one for the middle.
This is what i have:

 <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"> </div>

i cannot see the left and the right images. just the repeating backer_alt.gif. what am i doing wrong?
thx

edited
this version works:

 <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"> </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

莫相离 2024-11-27 00:42:58

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

回复收藏 0 原文

小瓶盖 2024-11-27 00:42:58

正如诺亚所说，添加正确的左边距和右边距。 .tr 的右侧，取决于角宽度，
将会出现：

.bl {background: url(images/backer_left.gif) no-repeat left top; }
.br {background: url(images/backer_right.gif) no-repeat right top; }
.tr {background: url(images/backer_alt.gif) repeat-x; margin:0 10px; padding:10 0; }

As noah says, adding the correct margin left & right to the .tr, depending corner width,
will make it appears:

.bl {background: url(images/backer_left.gif) no-repeat left top; }
.br {background: url(images/backer_right.gif) no-repeat right top; }
.tr {background: url(images/backer_alt.gif) repeat-x; margin:0 10px; padding:10 0; }

回复收藏 0 原文

~没有更多了~