css - 另一个具有渐变透明度的背景图像

Question

我检查了很多关于这个主题的网站，发现随机的东西没有什么可靠的。我已经检查了一个已经在 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 示例是我不想实现的。让那张照片与背景融为一体。我希望你理解我的问题。

Answer 1

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

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