具有特定第一颜色长度的水平锐利背景梯度
具有特定第一颜色长度的水平锐利背景梯度
提问于 2015-11-25 13:59:56
我看到了在纯CSS中创建的垂直列，如下所示：
div {
height: 300px;
background: linear-gradient(to right, #a2ea4c 200px, #07aa91 200px, #07aa91);
}<div></div>
是否有可能以与上面类似的方式制作一个固定大小的的水平标头，即只使用CSS？
编辑**
下面是我试图做的最简单的例子。我不想在html标签上设置背景梯度，这样页面的顶部和底部有不同的超滚动颜色，中间有可变的，有时是透明的内容。当使用可变内容填充页面时，渐变将页面完全填充为第一个颜色。如下例所示。
html {
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}
div {
height: 300px;
width: 20%;
margin: 0 auto;
background: teal;
}<html>
<body>
<p> Lorem ipsum sit amet</p>
</body>
</html>
(如果将p标记切换为div-标记，您将看到梯度按预期工作)
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-25 14:05:05
linear-gradient函数的第一个参数是应用梯度的方向。在所讨论的片段中，它是to right，因此输出看起来像列。要将其更改为类似行，只需将方向更改为to bottom，如下面的代码段所示。
您可以阅读更多关于linear-gradient及其参数的文章，这里。
div {
height: 300px;
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}<div></div>
为了更好地理解梯度，下面是对梯度本身的解释：
- 梯度是一个
linear-gradient，也就是说，颜色在直线上线性变化。 - 方向是
to bottom，这意味着0%(或0px)位于容器的顶部，100%位于容器的底部。 #a2ea4c 200px表示渐变将以#a2ea4c的颜色出现，直到顶部的200px标记。#07aa91 200px表示在200px标记处，梯度的颜色突然将从#a2ea4c更改为#07aa91。这使得它成为一个硬停止梯度，因为没有渐变的颜色变化.#07aa91意味着颜色与200px标记保持不变，直到渐变结束。
由于以下原因，第二个片段中提供的梯度不可见：
- 渐变的颜色仅为前200 as的
#a2ea4c，但p元素的高度为300 as。 - 默认情况下，
p标记是块级容器，当没有特殊的CSS样式时，它的宽度为100%。 - 因此，实际上，
p标记覆盖了具有不同颜色的梯度的整个区域。
如果将p标记替换为div (从而导致应用自定义CSS )，则梯度将是可见的，因为width只会变成20%。
html {
background: linear-gradient(to bottom, #a2ea4c 200px, #07aa91 200px, #07aa91);
}
div {
height: 300px;
width: 20%;
margin: 0 auto;
background: teal;
}<div>Lorem ipsum sit amet</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33918454
复制相关文章
相似问题
腾讯云开发者
