如何删除使用线性渐变属性时出现的条纹

3回答

慕虎7371278

您正面临复杂的背景传播，您可以在这里阅读。我将尝试用简单的词语来解释它。你body的身高等于0; 因此背景将不会在其上可见，但默认情况下它具有在元素上8px创建高度的边距。8pxhtml为什么不是16px的高度（顶部为8px，底部为8px）？由于身体的高度为0，我们正面临一个边缘碰撞，并且两个边缘将只折叠成一个，我们的高度为8px。然后我们有一个背景传播body到html，linear-gradient并将覆盖8px高度。最后，html的背景传播到根元素以覆盖整个区域，这解释了线性渐变每个都重复8px。body {   background: linear-gradient(to top, red, yellow);}当使用向左或向右方向时也会重复这种情况但你不会在视觉上看到它是合乎逻辑的，因为它是相同的模式：body {   background: linear-gradient(to right, red, yellow);}你也可以删除重复，你会看到它只是覆盖 8pxbody {   background: linear-gradient(to right, red, yellow) no-repeat;}为了避免这种行为，您可以简单地设置height:100%为htmlhtml {   height: 100%;}body {   background: linear-gradient(to top, red, yellow);}它也可以使用，no-repeat因为默认情况下，linear-gradient覆盖整个是：html {   height: 100%;}body {   background: linear-gradient(to top, red, yellow) no-repeat;}

0 0

偶然的你

这是因为计算<body>出的高度是由其内容的高度产生的。当小于视口的高度时，背景将重复：body {   background: linear-gradient(to top, red, yellow);}为了确保它在整个视口的整个高度延伸本身（背景渐变），你需要给<body>一个min-height与视口的高度等于（100vw）：body { background: linear-gradient(to top, red, yellow); min-height: 100vh; }body {   background: linear-gradient(to top, red, yellow);   min-height: 100vh;   margin: 0;}正如@TemaniAfif在评论中指出的那样，上面的技术原因是：根元素（覆盖整个视口并从中继承其背景<body>）与<body>元素之间存在差异，元素按规定可小于视。根据W3C建议：根元素的背景成为画布的背景并覆盖整个画布，锚定（对于“背景位置”）与在仅为根元素本身绘制时相同的点。根元素不会再次绘制此背景。

0 0

浮云间

并且它比简单的背景传播更复杂，我试图在答案上解释它但不容易：s ...问题是身体有8px的边距，这使得html 8px的高度和这一个采取线性 - 渐变作为背景图像从第一次传播，因此覆盖8px然后第二次传播到根元素保持相同的背景大小，只需重复它，我们有这个结果！...使身体边缘：0，我们将没有更多的背景！

0 0