【问题标题】：css gradient with image strip height issue带有图像条高度问题的CSS渐变
【发布时间】：2011-05-09 09:05:28
【问题描述】：
如何使用我的线性渐变图案条 mystrip.jpg (1x1024 px) 作为网页的主体背景？我需要水平重复自身，并使其高度为身体高度的 100%。
我试过了
body{background:url(mystrip.jpg) repeat-x;}
但每当我的正文内容超过 1024px 高度时，我可以清楚地看到我的条形图案的底部边框。
谢谢
卢卡
【问题讨论】：
标签：
design-patterns
css
linear-gradients
【解决方案1】：
只需设置与底部颜色匹配的背景颜色即可。
body{background: #f00 url(mystrip.jpg) repeat-x;}
或者任何颜色。
您也可以使用背景大小，但这可能不会使它看起来很好。
我建议尽可能使用 CSS 渐变。
【解决方案2】：
您还应该设置背景颜色，以便在图像结束的地方，颜色接管。使背景颜色与图像的底部颜色相同。
例子：
body{ background: #ccc url(mystrip.jpg) repeat-x; }