-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;
У меня есть этот код выше, и я просто понял, что этот градиент идет сверху вниз. Есть ли способ остановить весь градиент после 30px. Я могу внести коррективы по мере необходимости, но как вы получите градиенты, чтобы завершить себя после 30px?
Вы можете использовать свойство background-size вместе.
вот так:
div {
height:100px;
background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
background-size:auto 30px;
}
В 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.
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]
}
Хорошо, если остальная часть градиента (после заданного количества пикселей) может быть фиксированным цветом, просто используйте три цветовых остановки следующим образом (например, останавливается на 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%);