渐变在特定高度停止并以纯色继续

Posted 2023-02-16

【中文标题】渐变在特定高度停止并以纯色继续

【英文标题】：Gradient that stops at a particular height and continues further with a solid color

【发布时间】：2011-06-28 08:34:27

【问题描述】：

我想在 html/CSS 中有一个渐变。

假设某些 DIV 总是超过 400px 高。我想添加渐变，使其顶部为#FFFFFF，300px 为#EEEEEE。所以前 300px（高度）是一个很好的“白到灰”渐变。 300px 之后，无论 DIV 有多高，我都希望背景颜色保持#EEEEEE。

我猜这与渐变停止有关（？）

我该怎么做？

附：如果在 IE 中不可能，我不在乎。如果 gecko 和 webkit 浏览器能正确显示，我很好。

【问题讨论】：

为什么不使用 1 像素 x 300 像素的渐变背景图像#FFF - #EEE（我知道这对于 CSS3 来说有点过时）你可以让它重复 -x 但不是 y然后将背景颜色设置为#EEE，所以超过300px渐变的背景图像停止并填充纯色

@Daniel haha​​.. 这就是我以前做的事情，直到这一次，当我想我会尝试一些 HTML(5) 和 CSS 中的新东西.. :D 这不是t一些生产站点，它只是探索。所以我们的目标更多是让它使用 CSS3 来工作，而不是让它按时工作。

【参考方案1】：

background-color: #eee;
background-image:         linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image:    -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */

这是根据当前的 Mozilla 文档：https://developer.mozilla.org/en/CSS/-moz-linear-gradient。

我已经确认它可以在 Firefox 3.6 和 Chrome 15 中运行。

【讨论】：

在 Firefox Quantum (v59) 中将 top 替换为 to bottom 对我有用

【参考方案2】：

另一种方式

background-color: #eee;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);

background-repeat:no-repeat;
background-size:100% 300px;

【讨论】：

@PetrolMan 是的，它适用于 Chrome（基于 Webkit 的浏览器）。就在那里。无处可去。

@VolkerE。我已经更新了答案以包含其他浏览器的前缀

@seanjacob 您还应该根据最新规范更新无前缀版本。 top 已过时。

【参考方案3】：

height: 400px;    
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));

您可能必须使用 0.75，因为它是您身高的百分比，但这应该可以解决问题。

【讨论】：

嗯.. 我不能告诉它停止在特定的 PIXEL 值而不是 PERCENTAGE 值吗？

来吧：height: 800px; background: -webkit-gradient(linear, left top, 0 300, from(#fff), to(#eee)); 那将永远停在 300 像素。

您应该像300px 那样明确指定像素（顺便说一句，没有反对）。它吞噬了各种值，而旧的 -webkit-linear-gradient 只知道 0.0-1.0 和 0-100% 并且不能停留在像素值上。

是的，但你所拥有的是...top, 0 300, ...；它必须是...top, 0 300px, ...

另一个应该被否决的原因是因为它只适用于 webkit，但提问者说 gecko 和 webkit 是需要的。

【参考方案4】：

首先，很高兴知道可以在渐变上使用超过 2 个色标，但不能使用固定像素作为坐标，它必须是百分比。

在您的情况下，您可以简单地将第一个色标定义为 0%，将第二个色标定义为 50% 左右。我建议您使用gradient generator，因为具体实现取决于浏览器。

我想出了

background: #FFFFFF; /* old browsers*/ 
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */

【讨论】：

您可以在 webkit 浏览器中使用像素。在您引用left top, left bottom 的地方，您可以将像素值放在那里。请参阅下面的示例。

很高兴知道。您使用哪个版本的 Chrome/Safari？ IS-它与这个blog post有关吗？

请注意，webkit 语法在不断变化...webkit.org/blog/1424/css3-gradients

【参考方案5】：

background: -moz-linear-gradient(top,  #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);

这对我有用

【讨论】：

好的，取自colorzilla.com/gradient-editor & 刚刚删除了 cmets，分别将 px 值作为第二个单位参数 - 不是很有创意。

【参考方案6】：

你可以这样做：

<div id="bgGen"></div>

然后

#bgGen
   height: 400px;    
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
   margin-bottom:-400px;

这有点作弊，但它确实有效......

【讨论】：

这就是问题所在，这有点像 hack :) 谢谢！ （注意：我不是 -1 你的答案的工具；）

【参考方案7】：

我刚才也有同样的事情。我想在主要内容 div 上放置一个渐变，该渐变在页面之间的高度差异很大。

我最终得到了这个，它工作得很好（而且没有太多额外的代码）。

CSS：

.main-container 
  position: relative;
  width: 100%;

.gradient-container 
  /* gradient code from 0% to 100% -- from colorzilla.com */
  height: 115px; /* sets the height of my gradient in pixels */
  position: absolute; /* so that it doesn't ruin the flow of content */
  width: 100%;

.content-container 
  position: relative;
  width: 100%;

HTML：

<div class="main-container">
  <div class="gradient-container"></div> <!-- the only thing added for gradient -->
  <div class="content-container">
    <!-- the rest of my page content goes here -->
  </div>
</div>

我强烈建议使用colorzilla's gradient-editor 来生成 CSS。它使跨浏览器优化变得非常容易（尤其是如果您习惯于 Photoshop 或 Fireworks）。

【参考方案8】：

该问题最简单的解决方案是简单地使用多个背景，并为背景的渐变部分指定一个定义的大小，以百分比或像素为单位。

body 
  background: linear-gradient(to right, green 0%, blue 100%), green;
  background-size: 100px 100%, 100%;
  background-repeat: no-repeat;
  background-position: right;


html,
body 
  height: 100%;
  margin: 0;

根据需要与浏览器前缀混合搭配。

【参考方案9】：

这对我有用

    background: rgb(238, 239, 240) rgb(192, 193, 194) 400px; 
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;

还有人评论为什么不制作渐变图像并将其设置为背景。我现在也更喜欢使用 css，移动设计和访问者的数据使用有限，尽量限制尽可能多的图像。如果它可以用 css 完成而不是这样做