Question

此页面上的横幅（正在进行的工作）具有以下结构

<div id="top">
  <div class="sidebox">
    <div class="boxhead">
      <h2>Chalets des Bouleaux</h2>
    </div>
    <div class="boxbody">
      <p>Tel. 819-444-4444</p>
      <p>Notre-Dame de Pontmain, Québec, Canada</p>
    </div>
  </div>
</div>

带有班级sidebox的div及其所有子元素组成了横幅中心显示的徽标。横幅后面显示的照片是top div的背景图片。我希望徽标看起来好像漂浮在照片的顶部，即照片通过徽标的白色部分显示。显然现在没有发生这种情况，虽然我不确定为什么，因为我已经为构成徽标的所有元素设置了透明的背景颜色。

更新

我链接到的页面已更改，因此我删除了链接以避免混淆。请忽略此问题并投票决定关闭它！

Answer 1

你的GIF的背景是白色的！让它们透明！

Answer 2

 <div id="top" style="background-image:url(backgroundimagepath)">
  <div class="sidebox">
    <div class="boxhead">
      <h2>Chalets des Bouleaux</h2>
    </div>
    <div class="boxbody">
      <p>Tel. 819-444-4444</p>
      <p>Notre-Dame de Pontmain, Québec, Canada</p>
    </div>
  </div>
</div>

以这种方式更改它，并且sidebox应该具有透明背景。

Answer 3

您需要将侧箱的图像替换为具有透明背景的图像。

这些图片：

images/sbbody-r.gif
images/sbhead-r.gif
images/sbbody-l.gif
images/sbhead-r.gif

Answer 4

以下图片需要重新创建为具有半透明背景的24位PNG：

sbhead-l.gif
sbbody-l.gif
sbbody-r.gif
sbhead-r.gif

如果您需要IE6中的透明度，那么您应该使用与SuperSleight类似的东西来修补漏洞。

背景图像没有显示在div下面

更新

4 个答案: