CSS - 图像上的透明度渐变

Question

我希望我的背景图像从100%不透明度变为0%不透明度.我可以选择使用另一个图像资源,我使用图像编辑器使图像淡入不透明度,但我想尽可能少地使用资产.这可以用CSS完成吗？我知道我可以制作几个div,其中我改变了每个的不透明度,但是这需要很多div来使它看起来很好.

这是我的代码目前使用我不想使用的解决方案的样子:

<div class="contentFadeAway" id="cfa1"></div>
<div class="contentFadeAway" id="cfa2"></div>
<div class="contentFadeAway" id="cfa3"></div>
<div class="contentFadeAway" id="cfa4"></div>
<div class="contentFadeAway" id="cfa5"></div>
<div class="contentFadeAway" id="cfa6"></div>
<div class="contentFadeAway" id="cfa7"></div>
<div class="contentFadeAway" id="cfa8"></div>
<div class="contentFadeAway" id="cfa9"></div>
<div class="contentFadeAway" id="cfa10"></div>

而CSS:

.contentFadeAway {
    display: block;
    position: fixed;
    top: 160px;

    padding: 0px;
    width: 100%;

    height: 5px;
    background: url('/assets/shapeimage_3_int.png') fixed;
    background-size:cover;
    z-index: +1;
}

#cfa1 { top: 160px; opacity: 1; }
#cfa2 { top: 165px; opacity: .9; }
#cfa3 { top: 170px; opacity: .8; }
#cfa4 { top: 175px; opacity: .7; }
#cfa5 { top: 180px; opacity: .6; }
#cfa6 { top: 185px; opacity: .5; }
#cfa7 { top: 190px; opacity: .4; }
#cfa8 { top: 195px; opacity: .3; }
#cfa9 { top: 200px; opacity: .2; }
#cfa10 { top: 205px; opacity: .1; }

对于那些不明白代码在做什么的人来说,这里是:http://jsfiddle.net/FVNY7/2/ 我有一个背景图片,我希望内容在向上滚动时消失,所以我会具有相同的图像,不透明度从1到0,以产生这种效果.如果背景是纯色,我可以使用rgba渐变,但它是一个图像.

Answer 1

要获得最多的跨浏览器支持,请在div中设置背景图像.然后在其上覆盖另一个具有半透明渐变背景的div.

HTML:

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

CSS:

.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; }

.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: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 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);
}

这是上面例子的小提琴:http://jsfiddle.net/FVNY7/

Answer 2

我对问题的解决方案是简单地声明当前技术不可能实现这一点。另一种选择是使用简单的透明度渐变。在出现更好的解决方案之前，这就是我最终要做的事情。

background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);