向页面添加内容会使背景变得混乱

时间:2013-04-05 20:07:18

标签: javascript jquery html css background

我使用this生成器来生成我喜欢的渐变背景。有了这个,我设法创建以下看CSS代码。它在不同口味的蓝色之间消失。

background-image: -ms-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%);
background-image: -moz-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%);
background-image: -o-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2BD0FF), color-stop(1, #09ADF1));
background-image: -webkit-linear-gradient(top, #2BD0FF 0%, #09ADF1 100%);
background-image: linear-gradient(to bottom, #2BD0FF 0%, #09ADF1 100%);

我已将其粘贴到我的CSS代码的正文部分中。它看起来很流畅但是当我使用the code I posted in another topic添加内容时,它会使背景条纹化。

这是一张展示正在发生的影响的图片。该图片实际上是我在 中添加body时发生的问题的屏幕截图。云的情况(对于云,请参见上面的链接)是类似的,但条纹更宽。

enter image description here

我的HTML页面包含body中的其他一些元素,但删除它们不会影响这种情况。我在head部分中包含了jQuery 1.9.1,我的代码与之前链接的讨论完全相同。

是什么导致了这种问题?

2 个答案:

答案 0 :(得分:0)

使用background-repeat: no-repeat。这应该可以解决问题。

答案 1 :(得分:0)

感谢albertxing,我找到了正确的关键字并使用Google找到了解决方案。看来这个话题已经在另一个问题中得到了解释。

CSS Background Gradient Repeat Issue