Question

我想在HTML / CSS中使用渐变。

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

我想这与渐变停止（？）

有关

我该怎么做？

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

Answer 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。

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

Answer 3

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

你可能需要玩0.75，因为它是你身高的百分比，但这应该可以解决问题。

Answer 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 */

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

这对我有用

Answer 6

我刚才有同样的事情。我想在主要内容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）。

Answer 7

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

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

根据需要混合并匹配浏览器前缀。

Answer 8

你可以做：

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

有点作弊，但它有效......

Answer 9

这对我有用

public fun foo() {
    val someArray = array2d<String?>(100, 10) { null }
    val intArray = array2dOfInt(100, 200)
}

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

HTML / CSS渐变，在特定高度停止并继续使用纯色

9 个答案: