如何去除使用线性渐变属性时出现的条纹[重复]
Posted
技术标签:
【中文标题】如何去除使用线性渐变属性时出现的条纹[重复]【英文标题】：How to remove the stripes that appears when using linear gradient property [duplicate] 【发布时间】：2020-10-19 07:32:39 【问题描述】：当使用线性渐变 CSS 属性时，当使用左右作为方向值时，背景会显示为没有条纹。但是当方向值指定为顶部或底部时，条纹会出现在背景中。有什么办法可以去除条纹吗？
代码如下：
body
background: linear-gradient(to top, red, yellow);
【问题讨论】：
你能解释一下这些问题之间的共同点吗？我不明白它们之间的关系。 如果您可以包含一个与另一个的屏幕截图，这个问题可能会得到改善 - 通过您的描述很难判断发生了什么，以及期望的结果是什么。 【参考方案1】：您正面临一个复杂的背景传播，您可以阅读有关here 的信息。我会尽量用简单的话来解释。
您的body 的高度等于0；因此背景在其上不可见，但默认情况下它具有8px 的边距，在html 元素上创建8px 的高度。
为什么不是 16px 的高度（顶部 8px + 底部 8px）？
由于 body 的高度为 0，我们面对的是 margin collpasing，两个边距将折叠成一个，我们的高度为 8px。
然后我们有一个从body 到html 的背景传播，linear-gradient 将覆盖 8px 高度。
最后，将 html 的背景传播到 canvas 元素以覆盖整个区域，这解释了为什么线性渐变会重复每个 8px。
body
background: linear-gradient(to top, red, yellow);
在使用左或右方向时也会重复，但你不会在视觉上看到它这是合乎逻辑的，因为它是相同的模式：
body
background: linear-gradient(to right, red, yellow);
你也可以去掉重复，你会看到它只覆盖8px
body
background: linear-gradient(to right, red, yellow) no-repeat;
为了避免这种行为，您可以简单地将height:100%（或min-height:100%）设置为html
html
height: 100%;
body
background: linear-gradient(to top, red, yellow);
它也适用于no-repeat，因为默认情况下linear-gradient 将覆盖整个区域：
html
min-height: 100%;
body
background: linear-gradient(to top, red, yellow) no-repeat;
【讨论】：
好吧，我似乎明白了。一切背后都有无限的帆布材料。html 就像是无限事物的视口。如果html/document 的大小由于某些原因不足以填满浏览器窗口，那么我将看到的其余部分将绘制在无限的“画布”上（通过传播）。
@Rick 检查这个例子：jsfiddle.net/8jv9gxpw .. 看看边框只覆盖了主体的 8px 边距，而背景覆盖了整个区域。所以 HTML 并没有填满所有区域。只有它的背景用于填充该区域
@Rick 是的，它会重复，但只有背景会做，而不是你在其他评论中所说的 html。诀窍就在那里。 html 的高度低于画布，该高度的背景将被使用并在画布上重复。这就是为什么让 html 的高度等于 canvas (height:100%) 会避免这种重复。
@Rick 好吧，如果我们想精确定义画布，那就更棘手了。是的，根据规范 (w3.org/TR/CSS2/intro.html#the-canvas)，它是无限的，但在现实世界中不存在无限，并且画布上有一个定义的区域。换句话说，我们无法看到浏览器之外的东西，所以我们可以说浏览器在某种程度上是我们看到的画布区域的限制。这就是说，如果您将 html 设为 100%，您至少可以确保它将覆盖我们看到的画布的可视区域，但在技术上与画布保持不同
@RobertRocha 更准确地说是“包含块”而不是父元素。在大多数情况下，包含块是父元素。对于 html 元素，它是 initial 包含块（一个特殊的，它的高度是视口之一）。相关：w3.org/TR/CSS21/visudet.html#containing-block-details【参考方案2】：
这是因为<body> 的计算高度是由其内容的高度得出的。当小于视口的高度时，背景会自动重复：
body
background: linear-gradient(to top, red, yellow);
为了确保它在视口的整个高度上拉伸自身（和背景渐变），您需要将<body> 与视口的高度 (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 在cmets 中指出的那样，上述技术原因是：覆盖整个视口并从<body> 继承其背景的根元素与<body> 元素之间存在差异，如指定的那样，可以小于视口。根据W3C Recommendation：
根元素的背景成为画布的背景并覆盖整个画布，锚定在同一点（对于“背景位置”），就像它只为根元素本身绘制时一样。根元素不再绘制此背景。
【讨论】：
我想你应该提到它在根元素上重复，因为有背景传播并且根元素是全屏高度 谢谢@andrei。效果很好。 它比简单的背景传播更复杂，我试图在答案上解释它但并不容易：s ...问题是正文的边距为 8px，这使得 html 的高度8px 和这个将线性渐变作为第一次传播的背景图像，因此覆盖了 8px，然后第二次传播到根元素保持背景大小相同并简单地重复它，我们得到了这个结果！ ... 使 body margin:0 ，我们将没有更多的背景！ @Temani，我觉得我的回答在技术数据方面已经足够了。重点是简要解释正在发生的事情并提供实用的解决方案。不解释整个规范。对更多细节感兴趣的人可以在链接的规范或 MDN 中找到它们。 我不是在抱怨你的回答；）因为你没有义务解释整个过程，但我想对于像我这样有点好奇的人来说，即使我们能做到，清楚地了解正在发生的事情也很重要没有它。这就是为什么我发表评论，以便人们可以找到一些线索，以便更多地搜索和unrestand。 [顺便说一句htmlheight:100% 也会解决这个问题]以上是关于如何去除使用线性渐变属性时出现的条纹[重复]的主要内容，如果未能解决你的问题，请参考以下文章