Как мне «остановить» градиент от дальнейшего движения вниз по странице?

Question

Я думаю, что самый простой способ объяснить это просто дать ссылку на пример того, что я хочу:

http://macrumors.com

Вверху есть маленький синий градиент, который не очень сильно растягивается.далеко.

Я хочу повторить это, но единственный способ, которым я знаю, как делать градиенты в CSS3 - это сверху вниз, не останавливаясь на полпути.Я оглянулся и ничего не смог найти, хотя видел свойство color-stop, но я не уверен, что это то, что я ищу.

Может ли кто-нибудь помочь мне?

Answer 1

#test {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top,  #1e5799 0%, #e2e2e2 10px); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100px,#e2e2e2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1e5799 0%,#e2e2e2 100px); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1e5799 0%,#e2e2e2 100px); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1e5799 0%,#e2e2e2 100px); /* IE10+ */
    background: linear-gradient(top,  #1e5799 0%,#e2e2e2 100px); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
    ​}​

Я понятия не имею, какой синий и высокий используются на этом фоновом изображении, но вы можете легко вставить их в код, вставленный выше. Демо: http://jsfiddle.net/xyn4f/

Вы также должны проверить онлайн генераторы градиента. Я использовал этот для генерации кода.