如何使用 CSS 从下到上对 HTML 元素的背景进行部分着色？ [复制]

Question

我已经设法使用以下方法从上到下实现了我想要做的事情：

/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
  width: 50px;
  height: 100px;
  border: 5px solid black;
  background-image: linear-gradient(blue, blue);
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

<div class="test"></div>

在这个例子中，有没有办法从下到上填充 div，使下半部分为蓝色，另一半为白色？

Answer 1

您可以将background: blue 设置为第一个属性并将线性梯度更改为white, white 的值以反转声明。

/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
  background: blue;
  width: 50px;
  height: 100px;
  border: 5px solid black;
  background-image: linear-gradient(white, white);
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

<div class="test"></div>

Answer 2

这是你的意思吗？您可以更改background-size: 100% 70% 来调整您希望它进入另一个空间的距离。

.test {
  width: 50px;
  height: 100px;
  border: 5px solid black;
  background-image: linear-gradient(white, blue);
  background-size: 100% 70%;
  background-repeat: no-repeat;
  background-position: bottom;
}

<div class="test">
</div>