Количество цвета в градиенте
Есть ли разница в том, чтобы задать цвет несколько раз или задать его в процентах в градиенте? Влияет ли это на плавность перехода и производительность?
Например, по моей логике, запись (#fae259,#fae259,#fae259,#080085) должна быть равносильна записи (...#fae259 75%,#080085) (100%/4*3), но это не так, почему?
Ответы (2 шт):
Что значит "задать цвет несколько раз или задать его в процентах"? Есть разные виды градиентов. Каждый цвет в градиенте характеризуется набором значений:
- Направление;
- Цвет (можно с прозрачностью);
- Точки остановки;
.gradient {
width: 100px;
height: 100px;
background: linear-gradient(to top, rgba(0, 0, 0, 100%) 50%, rgba(255, 255, 255));
}<div class ="gradient">Внутри функции градиента в процентах задаём точки остановки цвета, а не сам цвет. Точки останвки можно задать и в пикселях. Если вам нужны чередующиеся цвета - задайте несколько точек остановки:
.multiposition-stops {
width: 100px;
height: 100px;
background: linear-gradient(to left,
lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}<div class ="multiposition-stops">Рассмотрим ваш пример (#fae259,#fae259,#fae259,#080085).
Мы имеем 4 точки, а следовательно, 3 диапазона равной длины. Какие будут значения точек останова в этом случае?
Очевидно, что запись эквивалентна этой:
(#fae259 0%, #fae259 33.33%, #fae259 66.66%, #080085 100%)
Или этой:
(#fae259 66.66%, #080085)
Отсюда и различия с (#fae259 75%, #080085).