Линейный градиент показывает два цвета, несмотря на то, что указан только один

Question

Я пытаюсь понять, как линейный градиент только с одним указанным цветом создает фон с двумя разными цветами.

.book-bg {
  height: 100px;
  width: 100%;
  background: #24ab9d
  linear-gradient(
      to bottom,
      #238d82 16px,
      rgba(35, 141, 130, 0) 16px,
      rgba(35, 141, 130, 0) 100%
    )
}

<div class="book-bg"></div>

Я ожидаю, что этот линейный градиент создаст фон только с #238d82. Значение rgba (rgba(35, 141, 130, 0)) преобразуется в один и тот же шестнадцатеричный код, поэтому не должен ли этот div быть одним цветом? Что вызывает темную полосу сверху?

Answer 1

.book-bg {
  height: 100px;
  width: 100%;
  background: #24ab9d
    linear-gradient(
      to bottom,
      #238d82 0px,
      rgba(35, 141, 130, 0) 16px,
      rgba(35, 141, 130, 0) 100%
    );
}

Начальный цвет функции линейного градиента начинается с 16 пикселей, из-за чего вы видите темную полосу сверху.

Answer 2

То, что вы видите, это #24ab9d, который вы определили как слой цвета фона.Ваш код эквивалентен этому:

.book-bg {
  height: 100px;
  width: 100%;
  background: 
    linear-gradient( to bottom, #238d82 16px, rgba(35, 141, 130, 0) 16px, rgba(35, 141, 130, 0) 100%);
  background-color: #24ab9d;
}

<div class="book-bg"></div>

Или этот, поскольку вы рассматриваете прозрачный цвет:

.book-bg {
  height: 100px;
  width: 100%;
  background: 
    linear-gradient( to bottom, #238d82 16px, transparent 16px);
  background-color: #24ab9d;
}

<div class="book-bg"></div>

Также как:

.book-bg {
  height: 100px;
  width: 100%;
  background: 
    linear-gradient( to bottom, #238d82 16px, #24ab9d 16px);
}

<div class="book-bg"></div>