我的問題是關於具有漸變的漸變：漸變 - 從上到下，以及漸變 - 從左到右。在CSS中漸變漸變
實施例：
的代碼是：
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;
我的結果如下。
正如你看到的，它不褪色的梯度，它看起來像單獨的層，這個梯度落後。有沒有其他的方法來實現這個？
正如我在評論中提到的那樣，當您在另一個漸變的頂部添加透明圖層時，它只會通過它下面的彩色漸變圖層（而不是容器中存在的圖像）顯示。因此，用梯度來實現這一點將非常困難（幾乎不可能）。
你必須使用蒙版圖像來實現它。以下是使用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面具在下面的鏈接：
這也可以用純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>您仍然可以爲您的彩色背景使用垂直漸變，但使用png-mask進行漸變。
看看使用PNG口罩的這些例子：https://css-tricks.com/clipping-masking-css/
其餘部分是相當簡單的。
以產生具有純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用於與background-size: contain背景的梯度。
優勢：
不便之
.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文件圖像不必尋找一個服務器，但當然，它可以很好地處理文件圖像）
透明將只顯示後面的圖層（這是帶有顏色的圖層），所以這種方法不起作用。您必須使用其他方式 – Harry