html – 渐变渐变CSS

我的问题是渐变渐变：渐变 – 从上到下,衰落 – 从左到右.

例：

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

我的结果在下面.

如你所见,它不会渐变渐变,它看起来像单独的层,在这个渐变之后.还有其他方法来实现吗？

解决方法

正如我在评论中提到的,当您在另一个渐变顶部添加透明层时,它只会显示在其下方的着色渐变层(而不是容器中存在的图像).所以,用梯度来实现这一点非常困难(几乎不可能).

你必须使用掩码图像来实现它.以下是使用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,.95)" />
        <stop offset="100%" stop-color="rgba(198,.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 Clipping and Masking – MDN
> SVG Masks Tutorials @ JENKOV.COM

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

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,.95) 100%);
  -webkit-mask-image: linear-gradient(90deg,transparent 40%,rgb(0,0) 100%);
}

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

html – 渐变渐变CSS

解决方法

猜你在找的HTML相关文章