CSS - 图片渐变透明度

Question

CSS - 图片渐变透明度

10

我希望我的背景图片从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渐变，但它是一张图片。

- michaellindahl

1

你希望这个“淡出”何时发生？ - Bram Vanroy

在 div 的顶部和底部。我只是添加了一个可怕解决方案的示例代码。 - michaellindahl

我的意思是，你想什么时候触发淡出效果？图片什么时候需要淡出？ - Bram Vanroy

我不想让它淡出。我不想让它成为CSS过渡效果。我希望它是永久的。我可以创建一张从上到下透明度为0％到100％的图像，但我不想在网站上再添加其他资源。 - michaellindahl

我仍然不明白你想要什么。当页面加载时，背景是100%可见的，然后呢？它立即隐藏自己吗？也许只是我，因为已经有两个人试图回答你的问题了。 - Bram Vanroy

@BramVanroy 我已经用我的尝试回答了我的问题，这种方法有点奏效，也请查看我的jsfiddle。我有一个图像背景、一个透明的标题栏和一个内容区域。我不希望内容出现在标题栏下面，所以我也让图像背景出现在内容上方，只出现在标题栏下面。如果用户滚动内容，它会立即消失（就像它刚刚离开页面一样），我希望它逐渐消失。如果它是黑色背景，我可以在内容上使用rgba渐变和不透明度变化，但它不是。 - michaellindahl

3个回答

1

我的解决方案是简单地说明当前技术无法实现这一点。另一个选择是使用简单的透明度渐变。在更好的解决方案出现之前，这就是我最终会采取的措施。

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

- michaellindahl

0

虽然这可能不是最好的实现方式，也可能有更好的方法，但我发现最好的方法是在我的问题中提到的简单粗暴的实现方式。使用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>\";
        ";
    }   
?>

- michaellindahl

这个解决方案在iPhone上不起作用。各个div可见且分离，背景图片也不像桌面那样固定。 - michaellindahl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- radicalpi · Accepted Answer

为了获得最佳的跨浏览器支持，请在您的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);
}

这是上面示例的fiddle链接：http://jsfiddle.net/FVNY7/。