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

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

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

Я предполагаю, что это имеет какое-то отношение к остановкам градиента (?)

Как я могу это сделать?

P.S. Если это невозможно в IE, мне все равно. Я в порядке, если gecko и webkit браузеры показывают это правильно.

Ответ 1

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

Возможно, вам придется играть с 0,75, поскольку это процент от вашей высоты, но это должно сделать трюк.

Ответ 2

background-color: #eee;  
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */
background-image:    -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image:         linear-gradient(top, #fff 0%, #eee 300px); /* W3C */

Это соответствует текущей спецификации moz https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Я пробовал, и он работает в FF3.6 и Chrome 15. *

Ответ 3

Альтернативный способ

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;

Ответ 4

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

В вашем случае вы можете просто определить свой первый цвет-стоп на 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 */

Ответ 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);

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

Ответ 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 gradient-editor для генерации CSS. Это упрощает кросс-браузерную оптимизацию (особенно если вы используете Photoshop или Fireworks).

Ответ 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;
}

Ответ 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;
}

Это своего рода обман, но он работает...

Ответ 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, чем это сделать