logo标签列表

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

htmlcssgradient
38

我想在HTML/CSS中添加渐变效果。

假设某个DIV的高度始终大于400px。我希望添加渐变效果，使其顶部为#FFFFFF颜色，到300px时为#EEEEEE颜色。因此前300px（高度）呈现出漂亮的“白到灰”的渐变效果。在超过300px后，无论DIV的高度如何，背景颜色都保持为#EEEEEE。

我猜这与梯度停止点有关（？）

我该如何实现呢？

P.S. 如果IE不支持，我不在意。只要gecko和webkit浏览器能够正确显示即可。

5
为什么不使用一张1像素宽、300像素高的渐变#FFF - #EEE背景图片（我知道这有点陈旧，考虑到CSS3），你可以让它在x轴方向平铺，但不在y轴方向平铺，然后将背景颜色设置为#EEE，在超过300像素的地方，渐变背景图片停止并填补实色背景。 - Dan Hanly
3
@Daniel 哈哈..那是我以前的做法，不过这次我想尝试一些HTML(5)和CSS中更新的东西.. :D 这不是一个正式的网站，只是探索。所以目标更多地是使用CSS3使其运行而不仅是按时完成工作。 - user529141
9个回答
36
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”对我有用。 - FloatingRock
15

另一种方式

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的浏览器）中可以工作。只有在那里。其他地方不行。 - Volker E.
@VolkerE。我已经更新了答案，包括其他浏览器的前缀。 - seanjacob
@seanjacob 你还应该根据最新的规范更新未加前缀的版本。top已经过时了。 - Volker E.
10
height: 400px;    
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));

你可能需要尝试一下0.75，因为它是你高度的百分比，但那应该可以解决问题。

10
给你代码：height: 800px; background: -webkit-gradient(linear, left top, 0 300, from(#fff), to(#eee));}它的高度为800像素，背景渐变颜色从白色到灰色，但会在300像素处停止。 - TNC
1
你应该明确指定像素，例如 300px（顺便说一下，我没有投反对票）。与旧的 -webkit-linear-gradient 相比，它可以吞噬各种值，而旧的 -webkit-linear-gradient 只知道 0.0-1.0 和 0-100%，无法停留在像素值。 - Silviu-Marian
这就是为什么在你上面有另一个我的评论，里面包含像素值的原因。 :) - TNC
1
是的，但你那里写的是 ...top, 0 300, ...；它应该是 ...top, 0 300px, ...。 - Silviu-Marian
2
这个应该被踩的另一个原因是它只在Webkit中有效，但提问者说需要Gecko和Webkit。 - fabspro
显示剩余2条评论
4

首先，需要了解的是在渐变中可以使用超过2个的颜色停止点，但不能使用固定像素作为坐标，必须是百分比。

在您的情况下，您可以将第一个颜色停止点定义为0％，第二个颜色停止点定义为50％左右。我建议您使用渐变生成器，因为实现取决于浏览器。

我想到了

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 */
3
您可以在 WebKit 浏览器中使用像素。在引用“左上，左下”时，您可以在那里放置像素值。请参见我下面的示例。 - TNC
很好。你使用的Chrome / Safari版本是哪个？这与此博客文章有关吗？ - Baztoune
请注意，webkit语法正在变化中... http://www.webkit.org/blog/1424/css3-gradients/ - Chris Bentley
3

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

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;
}

根据需要，与浏览器前缀混合使用。

3
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);

这对我有用

好的，从http://www.colorzilla.com/gradient-editor/获取，并仅删除了注释，分别将px值作为第二个单位参数 - 不是非常有创意。 - Volker E.
2

您可以执行以下操作：

<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 ;)） - Addo Solutions
2
我刚刚也遇到了同样的问题。我想在主要内容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的渐变编辑器来生成CSS。它使得跨浏览器优化非常容易（特别是如果你习惯于使用Photoshop或Fireworks）。
0

这对我有用

    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 完成，那就这样做。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接