另一个具有渐变透明度的背景图像答案

【问题标题】：Yet another background image with gradient transparency另一个具有渐变透明度的背景图像
【发布时间】：2015-06-29 15:41:22
【问题描述】：

我检查了许多有关此主题的网站，发现随机的东西并不可靠。我检查了一个已经在 stackoverflow 中回答的问题，但这不是我要找的东西。我已经更改了提到的 JSfilled 的代码，并尝试将背景颜色添加到假定为透明的图像 http://jsfiddle.net/FVNY7/518/ 但遗憾的是，这不是我想要寻找的东西

    <div class="content"></div>
    <div class="FadeAway"></div>


.content{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') no-repeat; background-color:red;}

.FadeAway{
        position: absolute; top:0px; left:0px; width:100%; height:100%;
        background:transparent;
        background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -ms-linear-gradient(top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);

}

我想要一个与背景颜色混合的背景图像（渐变从图像的底部到顶部开始），换句话说，如果我的网站背景改变颜色，透明渐变会考虑我的背景颜色网站，我不想手动定义渐变开始的颜色。希望你明白我的意思。我提供的 jsfiddle 示例是我不想实现的。让那张照片与背景融为一体。希望你能理解我的问题。

【问题讨论】：

你可能需要 JS 来做到这一点。 CSS 无法检测另一个元素的背景颜色
您可能希望链接到您所看到的不符合您需求的问题，并说明该问题的答案如何无法满足您的需求。因为这个问题的标题和内容似乎和this question没有什么不同。

标签： css background-image

【解决方案1】：

如果没有 JavaScript，我建议对图像使用半透明的 PNG。然后它会看起来与背景融为一体。

或者，您可以将图像放在底层并使用 RGBa 颜色作为在其顶部应用的渐变。

【讨论】：