CSS - la Transparence en Dégradé sur une Image

Je voudrais que mon image d'arrière-plan pour aller de 100% d'opacité à 0% d'opacité. Je pourrais choisir d'utiliser une autre image de l'actif où je utiliser un éditeur d'image pour que l'image soit fondu opacité, mais je tiens à utiliser aussi peu actif que possible. Peut-on le faire avec du CSS? Je sais que je pourrais faire plusieurs divs dans lequel j'ai modifier l'opacité sur chacun d'eux, cependant, cela nécessiterait beaucoup de divs pour faire beau.

C'est ce que mon code ressemble actuellement avec la solution, je ne veux pas utiliser:

<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>

Et le 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; }

Pour ceux qui ne comprennent pas ce que le code est en train de faire c'est ici: http://jsfiddle.net/FVNY7/2/ j'ai une image de fond, et je veux que le contenu de disparaître quand il défile, je voudrais donc avoir la même image avec une opacité de 1 à 0 pour donner cet effet. Si l'arrière-plan est un solide de couleur je pourrais simplement utiliser un rgba dégradé, mais ses une image.

Et quand souhaitez-vous que cette "fade" à se produire?
En haut et en bas de la div. J'ai juste ajouté un code d'exemple de ce qu'un terrible solution serait.
Je veux dire, quand vous voulez pour déclencher le fondu? Quand l'image doivent fadeOut?
Je n'en veux pas à s'estomper. Je ne veux pas être une transition CSS. Je veux qu'il soit permanent. J'ai pu créer une image qui est de 0% à 100% d'opacité, de haut en bas, mais je ne veux pas actif sur le site.
je ne comprends toujours pas ce que vous voulez. Lorsque le chargement d'une page, le fond est de 100% du visible, et puis quoi? Il cache immédiatement lui-même? C'est peut être juste moi, parce que deux personnes ont déjà essayé de répondre à votre question.

OriginalL'auteur michaellindahl | 2012-07-21

  1. 5

    Pour la plupart de la croix-prise en charge du navigateur, de l'ensemble de votre image d'arrière-plan dans votre div. Puis en recouvrir une autre div avec un semi-transparente en arrière-plan en dégradé sur le dessus de cela.

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

    Ici un violon de l'exemple ci-dessus: http://jsfiddle.net/FVNY7/

    C'est ce que je veux: jsfiddle.net/FVNY7/2 Mais sans le côté répétitif de la vrd.
    1) -ms-filter ligne n'est pas nécessaire - ce qui rend le code 1 ligne plus courte 2) la syntaxe Standard (pas de préfixes) va durer. Aussi, le -ms-linear-gradient ligne va après le filter. 3) Un pseudo-élément peut être utilisé à la place d'un deuxième div.
    Si vous souhaitez que le texte se fondre dans l'image à mesure que vous faites défiler vers le haut?
    Pas tout à fait. L'ensemble de la div, la div aura une couleur d'arrière-plan, des images, et ce n'est pas. Si seulement je pouvais utiliser l'opacité, mais ont-il un dégradé c'est ce que je suis à la recherche d'. Voir le jsfiddle. Mais oui, je veux le contenu de disparaître comme il sort de la page/zone visible.
    IE8 est d'être pris en charge, un pseudo-élément ne serait pas de travail.

    OriginalL'auteur Chris Hendry

  2. 0

    Bien qu'il peut ne pas être la meilleure mise en œuvre et il pourrait y avoir une meilleure façon le meilleur moyen que j'ai trouvé est le vers le bas et sale de mise en œuvre que j'ai mentionné dans ma question. À l'aide du code PHP, il peut être plus raffiné et bien paraître. Voici le code:

    <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>\";
";
}   
?>
    Cette solution ne fonctionne pas sur un iPhone. L'individu divs sont visibles et apparaissent séparées, et aussi l'image de fond n'est pas fixe, comme le bureau.

    OriginalL'auteur michaellindahl

  3. 0

    Ma solution à mon problème est tout simplement de préciser que ce n'est pas possible avec la technologie actuelle. Une alternative serait d'utiliser un simple dégradé de transparence. Jusqu'à ce qu'Une meilleure solution arrises c'est ce que je vais faire.

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

    OriginalL'auteur michaellindahl