CSS - Transparenz Farbverlauf auf ein Bild

Ich möchte mein hintergrund Bild, um zu gehen von 100% Deckkraft auf 0% Deckkraft. Ich konnte wählen, um ein anderes Bild-asset-wo ich ein Bild-editor, um das Bild Deckkraft, jedoch möchte ich so wenig assets wie möglich. Geht das mit CSS? Ich weiß, ich könnte mehrere divs, in denen ich die Deckkraft auf jeden, aber dies würde erfordern, eine Menge von divs zu machen, gut Aussehen.

Dies ist, was mein code momentan aussieht mit der Lösung, die ich nicht verwenden möchte:

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

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

Für diejenigen, die nicht verstehen, was dieser code tut es Sie hier: http://jsfiddle.net/FVNY7/2/ ich habe ein hintergrund Bild, und ich möchte die Inhalte zu verblassen, wenn es blättert, so hätte ich das gleiche Bild mit einer Deckkraft von 1 auf 0 zu geben, die Wirkung. Wenn der hintergrund eine solide Farbe, die ich konnte einfach rgba-gradient, aber es ist ein Bild.

Und Wann möchten Sie diese "fade" passieren?
Am oberen und unteren Rand der div. Ich habe gerade ein Beispiel-code, was für ein schrecklicher Lösung wäre.
Ich meine, Wann wollen Sie auslösen, die verblassen? Wann ist das Bild müssen fadeOut?
Ich möchte es nicht ausblenden. Ich will nicht, dass es eine CSS-transition. Ich will es von Dauer sein. Ich könnte erstellen Sie ein Bild, das 0% bis 100% Opazität von oben nach unten, aber ich will nicht zu haben, ein anderes Element auf der Website.
ich verstehe immer noch nicht, was Sie wollen. Wenn eine Seite geladen, der hintergrund ist zu 100% sichtbar ist, und was dann? Es sofort versteckt sich? Es kann nur mich, denn zwei Leute haben schon versucht, deine Frage zu beantworten.
Ich habe meine Frage beantwortet mit meinem Versuch, das irgendwie funktioniert und auch check out my jsfiddle. Ich habe ein Bild im hintergrund, eine transparente Titelleiste und einem Inhaltsbereich. Ich nicht wollen, dass die Inhalte erscheinen unter der Kopfzeile, also ich habe auch das Bild im hintergrund über dem Inhalt, und nur unter der Kopfzeile. Wenn der Benutzer scrollt der Inhalt sofort verschwindet (wie es wäre, wenn es nur gehen Weg von der Seite) ich will, dass es nach und nach verschwinden. Wenn es einen schwarzen hintergrund, ich konnte einfach rgba-gradient über die Inhalte mit einer Deckkraft zu ändern, aber es ist nicht.

InformationsquelleAutor michaellindahl | 2012-07-21

Für die meisten cross-browser-Unterstützung, legen Sie Ihr Hintergrundbild in deine div. Dann überlagern ein weiteres div mit einem semi-transparenten Farbverlauf hintergrund oben drauf.

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

Hier ist eine Geige des obigen Beispiels: http://jsfiddle.net/FVNY7/

Dies ist, was ich will: jsfiddle.net/FVNY7/2, Aber ohne die repetitive divs.
1) -ms-filter Zeile ist nicht nötig - das macht den code 1 Zeile kürzer 2) Standard-syntax (keine Präfixe) geht letzten. Auch die -ms-linear-gradient Linie geht nach der filter. 3) Ein pseudo-element verwendet werden könnte, anstatt ein zweites div.
Sie wollen also den text zu fade-in das Bild, als Sie nach oben scrollen?
Nicht ganz. Das gesamte div, div haben eine Hintergrundfarbe, - Bildern, und was nicht. Wenn ich könnte, nutzen Sie einfach die Deckkraft, aber habe es ein gradient ist, was ich Suche. Siehe jsfiddle. Aber ja, ich will content fade out, wie es Schriftrollen off-page/sichtbaren Bereich.
IE8 unterstützt werden, ein pseudo-element funktioniert nicht.
Danke Chris. Hier ist meine Umsetzung: doig.com.au

InformationsquelleAutor Chris

Obwohl es möglicherweise nicht die beste Umsetzung, und es könnte ein besserer Weg, die beste Möglichkeit, die ich gefunden habe, ist das down and dirty Implementierung, die ich bereits in meiner Frage. Mit Hilfe von PHP-code es können mehr verfeinert und gut Aussehen. Hier ist der 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>\";
        ";
    }   
?>

Diese Lösung funktioniert nicht auf einem iPhone. Die einzelnen divs können sichtbar werden und erscheinen getrennt, und auch das Hintergrundbild wird nicht behoben, wie der desktop.

InformationsquelleAutor michaellindahl

0

Meine Lösung für mein problem ist einfach, dass dies nicht möglich mit der aktuellen Technologie. Eine alternative Möglichkeit wäre die Verwendung einer einfachen Transparenz-Verlauf. Bis Eine bessere Lösung arrises das, was ich am Ende tun.
```
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
```
InformationsquelleAutor michaellindahl

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.