CSS Gradient - слишком много разрывов цвета

У меня проблема с линейными градиентами css. Я хочу сделать четкие цветовые переходы в определенных процентах. Но кажется, что цвета начинают размываться, когда я добавляю больше определенного числа:

Это пример градиента css со "слишком большим количеством" цветовых разрывов - и размытием там, где этого не должно быть:

div {
  height: 100px;
  background-color: red;
  background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 93%, #ffffff 93% 94%, #ffd900 94% 96%, #ffffff 96% 97%, #042750 97% 100%);
}
<div></div>

Это пример этого с достаточным количеством разрывов цвета, чтобы он не размывался:

div {
  height: 100px;
  background-color: red;
  background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 100%)
}
<div></div>


html css linear-gradients
person Artsen    schedule 18.05.2020    source источник
comment
Оба примера здесь не размываются ...   -  person Johannes    schedule 18.05.2020
comment
В первом примере я вижу значительное размытие. MacOS 10.15.4. Хром 81.0.4044.138. Прекрасно смотрится в Safari и Firefox.   -  person Turnip    schedule 18.05.2020
comment
Странно то, что он полностью исчезает, когда я использую менее 8 смен цвета.   -  person Artsen    schedule 18.05.2020
comment
Также используется браузер на основе Chromium и видно размытие - в Safari проблем нет.   -  person Alex    schedule 18.05.2020
comment
Мое тестирование в Firefox не показало размытия   -  person Artsen    schedule 18.05.2020
comment
Я столкнулся с той же проблемой. jsfiddle.net/Richardinho/nxcp3h6z/56 Я сообщил об этом в Chrome. Это только кажется в Chrome.   -  person Richard Hunter    schedule 05.10.2020

Ответы (1)


arrow_upward
6
arrow_downward

В таком случае лучше использовать несколько градиентов:

div {
  height: 100px;
  background: 
    /* Color                       position /width height   */
    linear-gradient(#03aeef,#03aeef)  50% 0 / 5%  100%, /* top layer */
    linear-gradient(#fff,#fff)        50% 0 / 10% 100%,
    linear-gradient(#03aeef,#03aeef)  87% 0 / 5%  100%,
    linear-gradient(#ffd900 ,#ffd900) 94% 0 / 5%  100%,
    linear-gradient(#fff,#fff)        95% 0 / 15% 100%,
    linear-gradient(#042750,#042750)  right / 60% 100%; /* bottom layer */
  background-repeat:no-repeat;
}
<div></div>

person Temani Afif    schedule 18.05.2020
comment
@Artsen, это не странно, но браузеру намного проще обрабатывать разные изображения с уникальным цветом и размещать их друг над другом, чем создавать одно изображение с несколькими цветами и определять цветовую границу. Здесь у вас нет цветового перехода, так как в каждом градиенте у меня только один цвет, и у вас не может быть размытия между двумя градиентами. - person Temani Afif; 19.05.2020
comment
Имеет большой смысл. Большое спасибо за ответ. Я не знал, что это можно сделать вот так. - person Artsen; 19.05.2020