浏览器不再显示渐变背景答案

【问题标题】：browser no longer displaying gradient background浏览器不再显示渐变背景
【发布时间】：2014-02-04 02:10:48
【问题描述】：

我正在尝试将横幅图像（带有透明部分）放在一个 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;
}

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

【问题讨论】：

你可以发布一个 URL，但是 jsfiddle 是一个更好的主意——一旦你解决了你的问题，这个 URL 就变得毫无用处了。小提琴将问题隔离开来，让其他人更容易看到。获取您的 HTML 和 CSS，制作小提琴，分享链接

标签： css background gradient

【解决方案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，这两个选项都不起作用，在这种情况下您需要为父级指定高度。

【讨论】：

当我在 img 之后添加
时，渐变 bg 效果很好，但其他两个图像（“LeftSlice.gif”和“ RightSlice.gif") 被扔在 div 的下方，彼此重叠。这是一个小提琴：link
我确定我在处理这一切时都错了，我不擅长 css。也欢迎对整体方法进行修复。
我试图通过尽可能少的调整来完成这项工作——使用这样的 clearfix：jsfiddle.net/Zu8wJ/3
为了更进一步，我建议放弃绝对定位的表格并将内容实际放在标题 div 本身中。只需将这 3 个浮动图像改为单个背景图像，这似乎是您想要完成的。
我也偶然发现了“将三个图像合二为一”的解决方案，并且它正在工作。谢谢！

【解决方案2】：

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

【讨论】：

谢谢！如果你有时间看看我在做什么，我在另一条评论中添加了一个小提琴。