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

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

您看到的是您定义为 background-color 层的 #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%
    );
}

Start colour of a linear gradient function is starting from 16px because of which you are seeing a dark strip at the top.

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

Linear gradient is showing two colors despite only one being specified

html

css

linear-gradients