图像上的透明度渐变
我希望我的背景图像从100％不透明度变为0％不透明度。 我可以选择在使用图像编辑器来使图像淡入淡出时使用其他图像资源，但是我希望尽可能少地使用资源。 这可以用CSS来完成吗？ 我知道我可以制作几个div，在其中我改变每个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渐变，但是它的图像。
对于大多数跨浏览器支持，请在您的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/
虽然它可能不是最好的实现，并且可能有更好的方法，但我发现的最好方式是我在我的问题中提到的拙劣实现。 使用PHP代码可以更精致，看起来不错。 代码如下：
<style>
.contentFadeAway {
display: block;
position: fixed;
top: 160px;
padding: 0px;
width: 100%;
height: 1px;
background: url('/assets/shapeimage_3_int.png') fixed;
background-size:cover;
z-index: +1;
}
</style>
<?php
for ($int = "1"; $int <= "50"; $int++) {
echo "<div class="contentFadeAway" style="top: " . (160 + 1 * $int) . "px; opacity: " . (1 - .02 * $int) . ";"></div>";
";
}
?>
我对我的问题的解决方案是简单地说现在的技术是不可能的。 另一种选择是使用简单的透明度渐变。 直到更好的解决方案出现，这是我最终会做的。
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);