Question

我有一个在css的html标签上运行的渐变背景。在body标签上，我有一个简单的无缝模式，可以在x轴和y轴上重复。

直到我在ipad / iphone（肖像模式）上预览网站时，一切看起来都很好，屏幕高度远高于宽度。

在手机的普通屏幕或横向模式下，网站将以我页面的页脚结束。但是，当屏幕高度较高时，无缝模式将停止重复，在页脚之后留下空的渐变。

我试过制作html＆amp;身体的高度100％，但它没有任何区别。我也尝试使用javascript动态更改body的高度以匹配html的高度，但无济于事。

任何人都可以帮我解决这个问题吗？提前致谢！

编辑：

jsfiddle.net/ek4jU/2 /

在小提琴中，放置在html中的背景渐变贯穿始终，但是身体中的白色背景却没有。我明白，如果我要使身体的高度达到100％，这将是我需要的正确结果。然而，这是为了显示我将在移动设备上看到的内容，即使身体的高度为100％。

Answer 1

进行下一次更改并查看jsfiddle演示：

body { background-color: #FFF; } /*remove this*/

html{
    height: 100%;
}
body {
    height: 100%;
    background: #4c4c4c; /* Old browsers */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#4c4c4c), color-stop(0.54, #595959), to(#131313));
    background: -webkit-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: -moz-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: -o-linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%);
    background: linear-gradient(#4c4c4c 0%, #595959 54%, #131313 100%); /* FF3.6+ */ /*         Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c',             endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

请参阅演示：http://jsfiddle.net/EaGAV/

在网站中重复背景

1 个答案: