CSS中的渐变和淡入效果

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;

我的结果在下面。

正如您所看到的，它没有淡化渐变，看起来像是一个单独的图层，在这个渐变背后。有没有其他实现方法？

- Nursultan Bagidolla

---

透明度只会显示在后面的图层（即有颜色的图层），因此这种方法行不通。你必须使用其他方式。 - Harry

Answer 1

如我在评论中提到的，当您在另一个渐变层之上添加一个透明层时，它只会显示在下面的有颜色的渐变层上（而不是容器中存在的图像）。因此，使用渐变实现这一点会非常困难（几乎不可能）。

您必须使用蒙版图像才能实现它。以下是一个使用SVG蒙版的代码片段。

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

<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>

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

• SVG剪切和遮罩-MDN
• JENKOV.COM上的SVG遮罩教程

---

这也可以通过纯CSS实现，但不幸的是mask-image属性目前仅由WebKit浏览器支持，因此不建议使用该方法。

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

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

- Harry

---

我能看到你最后一段代码中的梯度，但是找不到 Abcd。它去哪了？ - Spikatrix

我喜欢当你说某事几乎不可能的时候！ - vals

不错的尝试，@vals，但我不认为它产生了相同的效果。但是，使用CSS和渐变，这是可以实现的最接近的效果。 - Harry

如何使淡入垂直呈现？ - Juan Diego Ramirez

Answer 2

通过纯CSS实现此效果的方法是使用多个径向渐变，并通过每个径向渐变的透明度来控制它们之间的淡入淡出。在径向渐变后面，它们相当透明，以便于淡入淡出，右侧有一个提供不透明度（白色）的线性渐变。

如果您希望更准确地实现此效果，可以设置更多的径向渐变，每个径向渐变覆盖图像的一部分。

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

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

- vals

Answer 3

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

看看这些使用PNG掩码的示例：https://css-tricks.com/clipping-masking-css/ 其余部分非常简单。

- Eugene Vasin

Answer 4

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

优点：

• 适用于所有浏览器（不包括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文件图像，这样就不必寻找服务器，但当然，它也可以与文件图像一起正常工作。

- Derwoed