css3梯度中心衰减

有人知道如何使中心渐变从亮到暗，偏移量约为-20px顶部吗

这就是我到目前为止所能做到的

background-color:#303030;
background-image:-moz-linear-gradient(left,#282828,#616161,#303030);
background-image:-webkit-linear-gradient(left,#282828,#616161,#303030);
background-image:-o-linear-gradient(left,#282828,#616161,#303030);
background-image:-ms-linear-gradient(left,#282828,#616161,#303030);
background-image:linear-gradient(left,#282828,#616161,#303030);

我假设“顶部偏移约20 px”意味着您希望梯度向下移动20 px？如果是这样的话，你需要创建一些像div这样的元素，应用你的渐变，然后将它向下定位20像素左右

看这个。这可以通过许多不同的方式实现；这里我只是使用了绝对定位：

<div id="abc"></div>

#abc {
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    /* gradient here */
}

#abc{
位置：绝对位置；
顶部：20px；
底部：0；
左：0；
右：0；
/*这里的梯度*/
}

左侧不是线性渐变，它看起来是径向的。下面是一个如何使用偏移量执行的示例：

基本上是这样使用的（应用适当的前缀，在旧的IEs中不受支持）：

---

一个渐变不能用一个渐变来完成，但可以用两个嵌套元素中的两个渐变来完成。当渐变填充整个图像时，可以指定透明的颜色停止

您的外部元素负责左侧，具有“从右到右”的线性渐变，渐变为中心颜色。内部元素负责右侧，具有“到左”渐变，渐变为透明，从而显示左侧渐变

<div class="gradient">
    <div class="gradient-inner">
    Content
  </div>
</div>

.gradient {
  background-image: linear-gradient(
    to right,
    red,
    green 40px
  );
  height: 200px;
  width: 100%;
}
.gradient-inner {
  background-image: linear-gradient(
    to left,
    red,
    green 40px,
    rgba(0, 0, 0, 0) 40px
  );
  height: 200px;
  width: 100%;
}

内容
.梯度{
背景图像：线性梯度(
对,，
红色
绿色40px
);
高度：200px；
宽度：100%；
}
.内部梯度{
背景图像：线性梯度(
在左边，
红色
绿色40px，
rgba（0,0,0,0）40px
);
高度：200px；
宽度：100%；
}

您的图像中发生了什么？右边的那一块看起来工作正常。。。怎么了？@DragoonWraith右边离中心梯度最近。。。我想我对中间那条较轻的线很挑剔。它不像PS设计那样扩散。+1很好的捕捉。它看起来更像是一个径向梯度而不是线性梯度。虽然你可能应该在你的答案中包含你的代码，以防将来链接崩溃。谢谢，你是否使用了生成器，如果是的话，你是否有链接。。。如果不是，色码后的每个数字代表的是它将要做的淡入度是多少？您可以使用www.colorzilla.com/gradient-editor帮助可视化渐变（手动添加偏移）。%表示颜色的“位置”。在径向，0%将是中心，100%是最外侧的边缘，你可以根据你想要的渐变方式来选择中间的边缘！我认为径向梯度根本不是OP想要的。如果你看左图，颜色一致的线条是垂直的。这是一个线性梯度。问题是OP希望颜色停止在（大约）左100像素，右100像素，并且具有可变宽度的容器。我知道这很旧，但严重吗？自从我们有能力做梯度，我们已经能够把超过2个颜色停止。。。。

<div class="gradient">
    <div class="gradient-inner">
    Content
  </div>
</div>

.gradient {
  background-image: linear-gradient(
    to right,
    red,
    green 40px
  );
  height: 200px;
  width: 100%;
}
.gradient-inner {
  background-image: linear-gradient(
    to left,
    red,
    green 40px,
    rgba(0, 0, 0, 0) 40px
  );
  height: 200px;
  width: 100%;
}