Question

我正在尝试将横幅图像（带有透明部分）放在div中，在渐变背景上我可以动态更改，然后将表格覆盖在其上面。

    <div style="margin: 0; padding: 0; width: 796px; position: relative; ">
        <img src="LeftSlice.gif" style="margin: 0; padding: 0; position: relative; float: left;">
        <div style="margin: 0; padding: 0; 
            background: -webkit-linear-gradient(white, blue);
            background: -o-linear-gradient(white, blue);
            background: -moz-linear-gradient(white, blue);
            background: linear-gradient(white, blue);
            ">
            <img src="MiddleSlice2.gif"  style="margin: 0; padding: 0; position: relative; float: left;  z-index: 250; ">
        </div>
        <img src="RightSlice.gif" style="margin: 0; padding: 0; position: relative; float: left; ">

        <table style="padding: 0 20px; width: 796px; position: absolute; left:10px; top:10px; z-index: 500 " >
        <tr>
            <td valign="bottom" align="left"><img src="IFFUlogo.gif" height="80px" width="200px" ></td>
            <td valign="top" align="right">About Us | Register | Login</td>
        </tr>
        <tr>
            <td colspan="2" valign="bottom" align="center" style="padding: 30px 0 0 0; color: white; "><h1>Custer County District High School</h1></td>
        </tr>
        </table>
    </div>

我没有渐变（body bg显示在横幅.gif的透明部分下）

当我看到Firebug中的元素时，我明白了：

element.style {
background: linear-gradient(#FFFFFF, #0000FF) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}

我认为我们不允许发布网址，但如果是这样，我可以这样做。

Answer 1

看起来您div中的所有内容都是浮动的或position:absolute。这将导致div自身崩溃，因此您无法看到背景。无论何时，当您想要展开以包含其内容的容器内部浮动内容时，您需要插入clear，如下所示：

<div id="myContainer" style="background:red;">
  <img id="myFloatingElem" style="float:left;" />
  <div style="clear:left;"></div>
</div>

或者更好的是，不要这样做，而是使用Clearfix代替（http://nicolasgallagher.com/micro-clearfix-hack/查看随附的css）：

<div id="myContainer" class="cf" style="background:red;">
  <img id="myFloatingElem" style="float:left;" />
</div>

对于position:absolute，这两个选项都不起作用，在这种情况下您需要为父级指定高度。

Answer 2

我测试了你的CSS渐变代码并且它有效。我发现问题出现在float: left标记内的图像的div，但是我不知道您希望看到什么输出，因为图像文件不可用。也许你可以清楚地发布它。

浏览器不再显示渐变背景

2 个答案: