我试图将横幅图像（带有透明部分）放置在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>
我没有渐变（正文bg显示在横幅.gif的透明部分下方）
当我查看Firebug中的元素时，得到以下信息：
element.style {
background: linear-gradient(#FFFFFF, #0000FF) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}
我认为我们不允许发布网址，但如果可以，我可以这样做。
看来div中的所有内容都是浮动的或position:absolute。这将导致div自身崩溃，因此您看不到背景。每当您在容器中浮动一些要扩展以包含其内容的容器时，您都需要插入clear如下代码：
<div id="myContainer" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
<div style="clear:left;"></div>
</div>
或者更好的是，不要这样做，而应使用Clearfix（有关随附的CSS，请参见http://nicolasgallagher.com/micro-clearfix-hack/）：
<div id="myContainer" class="cf" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
</div>
对于position:absolute，这两个选项都不起作用，在这种情况下，您需要为父级指定高度。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句