特定区域的背景颜色[重复]

Question

我是 HTML、CSS 和 JavaScript 的新手，想知道有没有办法为元素的某个部分添加背景颜色？

  .box h3{
    color: #000;
    border: solid black;
    padding-left: 300px;
    background-color: red;
    }

要切掉第一个的背景颜色，可以说是 250 像素。

Answer 1

您可以通过渐变背景来做到这一点。示例：

p {
  border: 1px solid red;
  height: 300px;
  background: linear-gradient(180deg, rgba(9,9,121,1) 83%, rgba(255,255,255,1) 83%, rgba(255,255,255,1) 100%);
}

1. 创建具有固定高度的元素
2. 定义具有 3 个渐变色标的渐变
3. 计算梯度停止位置。在这种情况下，300 像素的 83% 大约是 250 像素
4. 第一个渐变停止是背景颜色1
5. 第 2 和第 3 渐变停止是 color2

您需要两个 color2 的渐变色标，否则您将获得颜色之间的线性过渡。