我的问题是关于渐变的渐变：渐变 - 从上到下，渐变 - 从左到右。
例子：
代码是：
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;
我的结果如下。
如您所见，它不会淡化渐变，它看起来像单独的图层，位于渐变后面。有没有其他实现方法？
【问题讨论】：
标签： html css svg linear-gradients
另一种方法是在background-size: contain 的背景中使用 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 文件图像，因此不必寻找服务器，但当然，它适用于文件图像）
【讨论】：
正如我在 cmets 中提到的，当您在另一个渐变之上添加一个透明层时，它只会通过其下方的彩色渐变层显示（而不是容器中存在的图像）。因此，使用渐变来实现这一点非常困难（几乎不可能）。
您必须使用蒙版图像来实现它。下面是一个使用 SVG 掩码的 sn-p。
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 蒙版的更多信息：
这也可以使用纯 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, 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>【讨论】：
Abcd。去哪儿了？
使用纯 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>【讨论】：
您仍然可以对彩色背景使用垂直渐变，但使用 png-mask 进行渐变。
看看这些使用 PNG 掩码的例子：https://css-tricks.com/clipping-masking-css/
剩下的就很简单了。
【讨论】：