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

Question

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

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

Answer 1

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

как это:

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

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

Answer 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]
}

Answer 4

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

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%);