尽管只指定了一种，线性渐变仍显示两种颜色

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

您将看到定义为背景色层的#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>

Answer 2

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

  

线性渐变函数的起始颜色从16px开始，因此您在顶部看到一个黑条。