Как сделать градиент css после стольких пикселей?

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

У меня есть этот код выше, и я просто понял, что этот градиент идет сверху вниз. Есть ли способ остановить весь градиент после 30px. Я могу внести коррективы по мере необходимости, но как вы получите градиенты, чтобы завершить себя после 30px?

Ответ 1

Вы можете использовать свойство background-size вместе.

вот так:

    
    div {
        height:100px;
        background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
        background-size:auto 30px;
    }

Ответ 2

В CSS3:

radial-gradient(ellipse at center center, 
  rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
  rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%)

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

Вы начинаете свой первый цвет с 0%, в центре.
Тогда у вас есть второй цвет в пикселях x (я использую x = 100 пикселей здесь).
Затем вы переходите к прозрачному белому при x + 1 пикселе.
И оставайтесь прозрачными до 100%.

это должно работать в браузерах, поддерживающих CSS3.

Ответ 3

Графики

css3 - это фоновые изображения, поэтому они будут заполнять всю высоту и ширину элемента блока, как если бы это был сплошной цвет.

Чтобы ограничить высоту градиента, ограничьте высоту элемента. "Чистым" способом сделать это может быть использование псевдоэлемента. Что-то вроде...

div {height: 500px; width: 500px; position: relative}

div:before {
     content: " ";
     width: 100%;
     height: 30px;
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     display: block;
     background-image: [your-gradient-here]
}

Ответ 4

Хорошо, если остальная часть градиента (после заданного количества пикселей) может быть фиксированным цветом, просто используйте три цветовых остановки следующим образом (например, останавливается на 30 пикселей - обратите внимание, что последняя запись идентична второй ):

background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);