重复背景+透明线性渐变是否与浮动不兼容？答案

【问题标题】：Are repeating background + transparent linear gradient combined not compatible with floats?重复背景+透明线性渐变是否与浮动不兼容？
【发布时间】：2012-01-31 23:46:19
【问题描述】：

这需要与所有现代浏览器以及 IE7 和 IE8 兼容。

我想要做的是为页面添加一个重复的背景图像，并使用线性淡入淡出使底部变暗。 http://i.imgur.com/rrzyw.jpg

这是我的示例代码：http://jsfiddle.net/hxk2d/2/

如您所见，我在上面的示例中有两个浮动 div。由于某种原因，身体线性渐变没有出现。我发现这是因为左边的 div 被浮动了。

当我删除左侧 div 的浮动时，您会开始看到渐变，但它只出现在容器内。

显然，无论是否有浮动 div，我都希望它能够正常工作。我的测试浏览器是 Chrome 和 Firefox，两者的行为相同。

我错过了什么？

【问题讨论】：

标签： css css-float linear-gradients

【解决方案1】：

请看我的例子，我不是 100% 确定，但我认为你的两个浮动的父 div 由于 2 个浮动 div 没有计算高度，那个 div 的父标签是没有任何高度的主体，因为里面什么都没有，作为快速修复，我向浮动 div 的父级添加了一些 clearfix 类

这里是示例链接： http://jsfiddle.net/sHXf2/

我修改了您的渐变以使其更明显，希望这对您有所帮助

【讨论】：

酷，谢谢！我展示的这个问题有两个想法：1. html 和 body 可以做重复的 bg 或线性渐变，但由于某种原因，两者不能轻松组合 2. 为什么浮动 div 会导致渲染线性问题坡度。 clearfix hack 目前可能是一个不错的临时解决方案。没想到。
我认为渐变需要知道元素的高度以便它可以添加它的颜色停止，主体的高度取决于它的内容，你要么保留 clearfix 要么添加一些内联内容看这个例如，我在浮动 div 下方添加了文本 jsfiddle.net/mrpollo/SrURv 我添加了两者以使其保持在底部