Können Sie mit CSS eine Verlaufsmaske anwenden, um im Hintergrund über Text zu blenden?

Habe ich ein Vollbild festen hintergrund Bild. Ich würde gerne den text in meinem div scrollen, um "fade-out" an der Spitze, vermutlich durch die Anwendung einer verlaufsmaske zu der im hintergrund nur den oberen Teil der div. Ich bin daran interessiert, dass der text so Aussehen, wie es verblasst, wie es der Benutzer führt einen Bildlauf nach unten, aber immer noch ein großer Bereich, der die volle Deckkraft für den text tatsächlich liest.

Ich weiß, es gibt Maskierung Optionen in den webkit, aber ich kann nicht einen Weg finden, verblassen auf der Seite hintergrund über den enthaltenen text nur die Anwendung des Gradienten auf einem kleinen Teil des Elements.

Hoffentlich habe ich schon aussagekräftig genug.

Dank.

InformationsquelleAutor der Frage aviemet | 2012-03-01

  1. 56

    Ich hab mich schon gewundert das gleiche. Die Lösung ist eigentlich ganz einfach. Obwohl dies natürlich durchaus ein moderner CSS3-feature, so steckt man auf die browser-Kompatibilität.

    Webkit kümmern kann, dies mit einer einzigen Zeile CSS:

    -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

    Diese würde verblassen die unteren 10% von was auch immer element angewendet wird, ohne sogar so viel wie ein Bild. Man könnte hinzufügen padding-bottom: 10% um sicherzustellen, dass Inhalt ist nur verblasst, wenn es mehr zu scrollen.
    Quelle: http://www.webkit.org/blog/181/css-masks/

    Einen Mozilla (Gecko) - fallback ist ein bisschen schwieriger, aber: Sie können seine "Maske" - Funktionaber dies erfordert eine SVG-Bild. Sie könnten versuchen, base64-embed-das Bild in dein stylesheet ...

    InformationsquelleAutor der Antwort Adrian van Vliet

  2. 0

    Vorausgesetzt, ich bin zu verstehen, was Sie wollen, richtig, Sie könnten die doppelte top 300ish Pixel des Bildes und wenden Sie einen Transparenz-Verlauf, um Sie in Photoshop (so dass die Spitze komplett blickdicht und unten vollständig transparent).

    Dann legen Sie dieses Bild in einem div oder einige andere element fest an der Spitze des fixierten Bildes, aber mit einem hohen z-index. Der text würde dann scrollen Sie über Ihren hintergrund, aber unter der div overlay-und fade-out, wie das overlay wird immer undurchsichtiger in Richtung der Oberseite des Bildschirms.

    InformationsquelleAutor der Antwort Gareth

Schreibe einen Kommentar