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颜色作为应用于其上方的渐变。

另一种具有渐变透明度的背景图像

1 个答案: