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

回答(9)

3 years ago

height: 400px;

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

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

3 years ago

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

我已经确认它适用于Firefox 3.6和Chrome 15 .

3 years ago

替代方式

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;

3 years ago

首先，很高兴知道你可以在渐变上使用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 */

3 years ago

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

这对我有用

3 years ago

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

我强烈建议使用colorzilla's gradient-editor来生成CSS . 它使跨浏览器优化变得非常简单(特别是如果您习惯使用Photoshop或Fireworks) .

3 years ago

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

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 years ago

你可以这样做：

然后

#bgGen{

height: 400px;

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

margin-bottom:-400px;

}

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

3 years ago

这对我有用

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完成而不是它