css - 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 像素”意味着您希望渐变向下移动 20 像素？如果是这种情况，您需要创建一些像 div 这样的元素，应用渐变，然后将其向下放置大约 20 像素。

请参阅此JSFiddle。这可以通过许多不同的方式来完成；这里我只是使用了绝对定位：

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

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

Answer 3

AFAICT 你不能用一个渐变来做到这一点，但你可以用两个嵌套元素中的两个渐变来做到这一点。当渐变填充整个图像时，您可以指定透明色标。

您的外部元素处理左侧，具有“向右”线性渐变，渐变为中心颜色。内部元素负责右侧，使用“向左”渐变渐变为透明度，从而让左侧渐变出现。

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