渐变与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;

我的结果如下.

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

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
• SVG Masks Tutorials @JENKOV.COM

这可以使用纯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>

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>