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



красивые градиенты css (6)

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

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

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

Как мне это сделать?

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

https://src-bin.com


Answer #1

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

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 #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 #3

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

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 #4

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


Answer #5
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 #6
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);

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





gradient