HTML / CSS градиент, который останавливается на определенной высоте и продолжается сплошным цветом

Question

Я хочу иметь градиент в HTML / CSS.

Предположим, что некоторые DIV всегда имеют высоту более 400 пикселей.Я хочу добавить градиент, чтобы он был #FFFFFF вверху и #EEEEEE на 300 пикселей.Таким образом, первые 300 пикселей (по высоте) - это хороший градиент «от белого к серому».После 300px, независимо от высоты DIV, я хочу, чтобы цвет фона оставался # EEEEEE.

Я думаю, это как-то связано с градиентными ограничителями (?)

Как я могуэто?

PS Если это невозможно в 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% или около того.Я предлагаю вам использовать генератор градиента , потому что реализация зависит от браузера.

Я придумал

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

Самое простое решение проблемы - просто использовать несколько фонов и задать градиентную часть фона определенного размера, в процентах или в пикселях.

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 7

У меня было то же самое только сейчас. Я хотел установить градиент для основного содержимого, который значительно различался по высоте от страницы к странице.

Я закончил с этим, и он прекрасно работает (и не слишком много дополнительного кода).

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

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

это сработало для меня

    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, то сделайте это