CSS - 图像上的透明度渐变答案

【问题标题】：CSS - Transparency Gradient on an ImageCSS - 图像上的透明度渐变
【发布时间】：2012-07-20 14:48:15
【问题描述】：

我希望我的背景图像从 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 的顶部和底部。我刚刚添加了一个糟糕的解决方案的示例代码。
我的意思是，你想什么时候触发淡入淡出？图片什么时候需要淡出？
我不希望它淡出。我不希望它成为 CSS 过渡。我希望它是永久的。我可以创建一个从上到下不透明度为 0% 到 100% 的图像，但我不想在网站上有其他资产。
我还是不明白你想要什么。当页面加载时，背景是 100% 可见的，然后呢？它立即隐藏自己？可能只有我一个人，因为已经有两个人尝试过回答你的问题。

标签： css transparency background-image

【解决方案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/

【讨论】：

这就是我想要的：jsfiddle.net/FVNY7/2 但没有重复的 div。
1) 不需要-ms-filter 行 - 这使得代码 1 行更短 2) 标准语法（无前缀）放在最后.此外，-ms-linear-gradient 行位于filter 之后。 3) 可以使用伪元素代替第二个 div。
@michaellindahl 所以你想让文本在你向上滚动时淡入图像？
不完全。整个 div，这个 div 会有背景色，图片等等。如果我可以只使用不透明度，但让它成为我正在寻找的渐变。请参阅 jsfiddle。但是，是的，我希望内容在页面/可视区域滚动时淡出。
@Ana--如果要支持 IE8，a pseudo-element would not work.

【解决方案2】：

虽然它可能不是最好的实现，并且可能有更好的方法，但我发现的最好方法是我在问题中提到的肮脏的实现。使用 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>\";
        ";
    }   
?>

【讨论】：

此解决方案不适用于 iPhone。单独的 div 可以是可见的并且看起来是分开的，而且背景图像也不会像桌面那样固定。

【解决方案3】：

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

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

【讨论】：