css3渐变中心淡入淡出

Question

有没有人知道如何使中心渐变从浅到深渐变，大约偏差约为-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);

Answer 1

左边不是线性渐变，它看起来是径向的。以下是如何使用偏移量进行操作的示例： http://codepen.io/mastastealth/pen/ocIaz

基本上使用这样的东西（应用适当的前缀，旧IE中不支持）：

background: radial-gradient(center 20px, circle, #616161 0%, #616161 20%, #282828 100%);

Answer 2

我认为“顶部大约20像素的偏移”意味着你希望梯度向下移动20px？如果是这种情况，你需要创建一个像div一样的元素，应用你的渐变，然后将它放下约20像素。

见JSFiddle。这可以通过许多不同的方式实现;我刚刚使用了绝对定位：

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

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

Answer 3

AFAICT您无法使用单个渐变执行此操作，但您可以使用两个嵌套元素中的两个渐变来执行此操作。当渐变填充整个图像时，您可以指定透明色标。

你的外部元素照顾左手边，右边是＆＃39;线性渐变，渐变为中心色。内部元素照顾右手边，左边是“左边”。渐变，渐变到透明度，从而让左侧的渐变出现。

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