英文:
CSS "background-image: linear-gradient" makes unwanted repeating color stripes with 180 degrees
问题
当我使用以下代码时：
body {background-image: linear-gradient(45deg, white 0%, grey 100%);}
结果如预期：
但当我将角度更改为180度或0度时，会出现条纹效果：
如果这就是我想要的，我可以直接使用repeating-linear-gradient()。
-
我尝试在互联网上搜索，但结果总是关于使用
repeating-linear-gradient()，而不是"我遇到了意外的线条条纹问题"。 -
我尝试调整角度，只有当角度为0或180度时才会得到这个结果，可以说是当余弦为0时。
英文:
When i use:
body {background-image: linear-gradient(45deg, white 0%, grey 100%);}
The result is as expected:
But when i change the angle to 180' or 0' it makes stripes:
Well if this was what i wanted, i'd just use repeating-linear-gradient()
-
I tried searching it on internet, but results was always about using
repeating-linear-gradient(). Rather than "Im having trouble with unexpected linear stripes" -
I poked around with the angle, it only gives me this result when it is 0 or 180 degrees. lets say when the cosinus is 0.
答案1
得分: 3
我发现问题是关于 body 元素的高度未知。因此，它重复了高度较小的 background-image。
是高度为 500px 的结果。
而最终的解决方案是：
body, html {
height: 100%;
margin: 0;
padding: 0;
background-image: linear-gradient(180deg, white 0%, grey 100%);
}
它像魔法一样工作。
我还意识到我当时正在关注修复问题，所以错过了我正在参考的教程中的这一点。
英文:
I figured that the problem is about the unknown height of the body element. So it repeats the small heighted background-image.
is the result with 500px height.
And the resultant solution is:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-image: linear-gradient(180deg,white 0%, grey 100%);
}
It works like a charm.
I also realised that the tutorial i was following was showing it and i missed it cause i was focused on fixing it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论