Q

重复背景+透明线性渐变组合不兼容浮动？

2012-01-02 48 views 0 likes

0

这需要与所有现代浏览器以及IE7和IE8兼容。重复背景+透明线性渐变组合不兼容浮动？

我试图做的是有一个重复的背景图像与线性淡入淡出，使底部暗的页面。 http://i.imgur.com/rrzyw.jpg

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

正如你所看到的，我有两个浮动的div在上面的例子中。由于某种原因，人体线性渐变不显示。我发现这是因为左边的div浮动。

当我删除浮动为左格，你开始看到一个梯度，但它只有在容器内出现。

很显然，我更喜欢这个工作是否有一个浮动DIV或没有。我的测试浏览器是Chrome和Firefox，两者都执行相同的行为。

我错过了什么？

2012-01-02 micah

A

回答

1

请大家看我的例子，我不是100％肯定，但我认为你的两个浮筒的父DIV没有过的高度计算为2分浮动div的结果，该分区的父标签身体是没有任何高度，因为里面什么都没有了，作为一个快速解决我增加一些clearfix类的父浮动div的

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

我修改你的梯度，使他们更加明显，希望这有助于

2012-01-02 18:00:44 rroche

+0

酷，谢谢！从这个问题我有两个想法：1. html和body可以重复bg或线性渐变，但由于某些原因，两者不能轻松组合2.为什么浮动div会导致呈现线性问题梯度。 clearfix hack现在可能是一个体面的临时解决方案。没有想过。 – micah 2012-01-02 18:44:28

+0

我觉得梯度需要知道元素的高度，它可以增加它的颜色停止，身体的高度取决于它的内容，你要么保持clearfix或添加一些内嵌的内容看这个例子，我增加文字下方浮动divs http://jsfiddle.net/mrpollo/SrURv/我添加了清除，使它停留在底部 – rroche 2012-01-02 19:48:07

相关问题