design-patterns - 带有图像条高度问题的CSS渐变

Question

如何使用我的线性渐变图案条 mystrip.jpg (1x1024 px) 作为网页的主体背景？我需要水平重复，并使其高度为身体高度的 100%。

我试过了

body{background:url(mystrip.jpg) repeat-x;} 

但是每当我的正文内容超过 1024px 高度时，我可以清楚地看到我的条形图案的底部边框。

谢谢

卢卡

Answer 1

只需设置与底部颜色匹配的背景颜色即可。

body{background: #f00 url(mystrip.jpg) repeat-x;} 

或者不管是什么颜色。

或者，您可以使用背景大小，但这可能不会使它看起来很好。

我建议尽可能使用 CSS 渐变。

Answer 2

您还应该设置背景颜色，以便图像结束的地方，颜色接管。使背景颜色与图像的底部颜色相同。

例子：

body{ background: #ccc url(mystrip.jpg) repeat-x; }