Question

我真的很陌生，所以请耐心等待。我正在编辑现有的3dCart网站，导航栏出现问题。

条形背景图片的覆盖率为100％，因此我的端盖未正确显示透明度。我做作弊，在端盖上应该是透明的，与页面背景颜色相同，但它不对，你可以看到它。

我想知道的是如何将端盖放在端部而不是条形图的“顶部”，可以这么说。

<td><table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: url(assets/templates/[template]/images/menu-bg.gif) repeat-x; color: #000; text-align: right">
            <tr>
              <td width="13"><img src="assets/templates/[template]/images/menu-l.png" width="13" height="48"></td>

端盖（menu-l）是一个透明但不起作用的png文件。我使用jpg将透明部分设置为主页背景颜色，但它是渐变并且看起来不正确。

如果有人能告诉我如何将这些帽子放在两端，我将不胜感激。

谢谢

Answer 1

您应该使用div，而不是使用表格。使用div元素，您可以使用position属性将图像直接放在您想要的位置。

#navcap1{position:absolute;left:XXpx;top:TTpx;}
#navcap2{position:absolute;right:ZZpx;top:TTpx;}

或者，更好的方法可能是为导航创建一个div，然后在div中浮动左右两端的端盖。

<div id=nav style="background:imagex; prop2:x; prop3:x;">
   <div id=capleft style="display:block; float:left;"></div>
   <div id=capright style="display:block; float:right;"></div>
</div>

或者，您可以控制div的宽度，这样您甚至不需要端盖。

无论哪种方式，我都不会使用表格，并且会破坏风格。

导航栏端盖

1 个答案: