Question

我的问题是关于渐变的渐变：渐变 - 从上到下，以及渐变 - 从左到右。

示例：

代码是：

background-image: 
  linear-gradient(0deg, rgba(198,83,165,.95) 0%, rgba(198,86,51,.95) 100%),
  linear-gradient(90deg, transparent 50%, rgba(0,0,0,.95) 100%);
opacity: 0.949;

我的结果如下。

如您所见，它不会淡化渐变，它看起来像这个渐变后面的单独图层。有没有其他方法可以实现这个？

Answer 1

正如我在评论中提到的，当您在另一个渐变的顶部添加透明图层时，它将仅通过其下方的彩色渐变图层（而不是容器中存在的图像）显示。因此，使用渐变来实现这一目标非常困难（几乎是不可能的）。

您必须使用蒙版图像来实现它。以下是使用 SVG掩码的片段。

＆＃13;

div {
  position: relative;
  height: 300px;
  width: 500px;
}
div svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
div .grad-fill {
  fill: url(#grad);
  mask: url(#masker);
}

＆＃13;

<div>
  <svg viewBox="0 0 500 300" preserveAspectRatio="none">
    <defs>
      <linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(270,0.5,0.5)">
        <stop offset="0%" stop-color="rgba(198,83,165,.95)" />
        <stop offset="100%" stop-color="rgba(198,86,51,.95)" />
      </linearGradient>
      <linearGradient id="mask-grad" gradientUnits="objectBoundingBox">
        <stop offset="40%" stop-color="black" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
      <mask id="masker" x="0" y="0" width="500" height="300">
        <rect x="0" y="0" width="500" height="300" fill="url(#mask-grad)" />
      </mask>
    </defs>
    <rect x="0" y="0" width="500" height="300" class="grad-fill" />
  </svg>
  <img src="http://lorempixel.com/500/300/animals/8" />
</div>

＆＃13;

您可以在以下链接中找到有关 SVG蒙版的更多信息：

这也可以用纯CSS完成，但不幸的是mask-image property is currently supported only by WebKit browsers所以不推荐这种方法。

＆＃13;

div {
  position: relative;
  height: 300px;
  width: 500px;
  color: white;
}
div:after,
img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
div:after {
  content: '';
  background-image: linear-gradient(0deg, rgba(198, 83, 165, .95) 0%, rgba(198, 86, 51, .95) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, rgb(0, 0, 0) 100%);
}

＆＃13;

<div>Some text
  <img src="http://lorempixel.com/500/300/animals/8" />
</div>

＆＃13;

Answer 2

使用纯CSS创建此效果的一种方法是使用多个径向渐变，并使用每个

的透明度

在径向渐变后面，它们非常透明，允许它们在它们之间淡入淡出，有一个线性渐变，可以向右侧提供不透明度（白色）。

如果您想要更准确，可以设置更多的径向渐变，每个渐变渐变都覆盖图像的一部分。

＆＃13;

.test {
  width: 500px;
  height: 400px;
  border: solid 1px green;
  background: 
  radial-gradient(ellipse 70% 100% at top right, rgba(255,0,0,0.5), transparent),   
               radial-gradient(ellipse 70% 100% at bottom right, rgba(255,0,80,0.5), transparent),
               linear-gradient(to left, white 20%, transparent);
  background-size: 100% 80%, 100% 80%, 100% 100%;
  background-position: top left, left 100%, top left;
  background-repeat: no-repeat;
}

body {
  background-image: url(http://lorempixel.com/500/400/nature);
  background-repeat: no-repeat;
  background-position: 8px 8px;
}

＆＃13;

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

＆＃13;

Answer 3

您仍然可以为彩色背景使用垂直渐变，但使用png-mask进行淡化。

请看这些使用PNG蒙版的示例：https://css-tricks.com/clipping-masking-css/

其余的很简单。

Answer 4

另一种方法是在background-size: contain的背景中使用png作为渐变。

优势：

适用于所有浏览器（不是＆lt; = IE8）

不便之：

需要图像编辑器来改变颜色
PNG可能很重（取决于其大小）
你不能很好地控制渐变的应用方式

.test > div {
  background: url('data:image/png;base64,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');
  background-size: contain;
  width: 300px;
  height: 150px;
}

.test p {
  color: #fff;
  font-weight: bold;
  text-align: right;
  margin: 10px;
}

.test {
  width: 300px;
  height: 150px;
  background: url(http://lorempixel.com/300/150/nature) no-repeat;
}

<div class="test">
  <div>
    <p>Lorem ipsum</p>
  </div>
</div>

（我使用的是base64图像而不是PNG文件图像，不必查找服务器，但当然，它可以正常使用文件图像）

渐变与CSS褪色

4 个答案: