HTML / CSS渐变，在特定高度停止，并继续进一步纯色 [英] HTML/CSS Gradient that stops at a particular height and continues further with a solid color

问题描述

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

假设一些DIV总是高于400px。我想添加渐变，使它是#FFFFFF在顶部和#EEEEEE在300px。所以第一个300px（高度方向）是一个很好的白色到灰色的梯度。在300px之后，无论DIV到底有多高，我都希望背景颜色保持#EEEEEE。

我想这与渐变停止有关系吗？ / p>

我该如何做？

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

解决方案

  height：400px; 
 background：-webkit-gradient（linear，left top，left bottom，from（#fff），to（#eee），color-stop（0.75，#eee））; 
  

你可能需要玩0.75，因为它是你的身高的一个百分比，但这应该。

I want to have a gradient in HTML/CSS.

Assume some DIV is always more than 400px tall. I want to add the gradient so that it is #FFFFFF at the top and #EEEEEE at 300px. So the first 300px (height-wise) is a nice 'white to grey' gradient. After 300px, regardless of how tall the DIV goes, I want the background color to stay #EEEEEE.

I guess this has something to do with gradient stops (?)

How can I do it?

P.S. If it is not possible in IE I don't care. I am fine if gecko and webkit browsers show this properly.

解决方案

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

You might have to play with 0.75 as it's a percentage of your height, but that should do the trick.

这篇关于HTML / CSS渐变，在特定高度停止，并继续进一步纯色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！