So erstellen Sie eine vignette mit hintergrund Verläufe

So erstellen Sie eine vignette mit hintergrund Verläufe

Gibt es eine Möglichkeit, ein Hintergrundbild erstellen, ohne die Verwendung von tatsächlichen Bild-Dateien, die einen Farbverlauf, der aussieht wie dieser?

Nicht die Holz textur, aber wie die Links und rechts sind dunkler und dann heller, wie Sie gehen nach innen.

Ich denke, es ist möglich, wenn verwendet gradient css-Eigenschaft. nie benutzt es aber.
lea.verou.mir/css3patterns , css3pie.com/demos/gradient-patterns
bitte wählen Sie eine Antwort aus, wenn Sie fanden Ihre Antwort.

InformationsquelleAutor user1446650 | 2014-03-06

  1. 24

    Box Schatten

    Erreichen Sie dies mit box-shadow oder radial-gradient. Schauen wir uns die erste option:

    .box {
    width: 300px; height: 300px;
    box-shadow: inset 0 0 5em 1em #000;
    background: url("http://lorempixel.com/300/300");
}

    Dieser verwendet eine inset Schatten, welche überlagerungen der Elemente, hintergrund-Bild. Der Effekt ähnelt deinem Beispiel Foto:

    So erstellen Sie eine vignette mit hintergrund Verläufe

    Radialen Verläufen

    Können Sie dies tun, ziemlich leicht mit Hilfe verschiedener linearer Verläufe oder einen radialen Verlauf:

    html {
    min-height: 100%;
    background:
        radial-gradient(transparent, black),
        url("http://lorempixel.com/500/500");
    background-size: cover;
}

    Fiddle: http://jsfiddle.net/jonathansampson/t8N5M/

    Wenn Ihr browser unterstützt Farbverläufe, cover, und mehrere Hintergründe Sie so etwas sehen:

    So erstellen Sie eine vignette mit hintergrund Verläufe

    +1 für die Antwort..

    InformationsquelleAutor Sampson

  2. 3

    Können Sie dieser online-editor zu generieren Verläufe verschiedener Ausrichtung wie radial, horizontal etc. Sie können auch Steuern Sie die Deckkraft Ihres Verlaufs.

    hier ist das JSFiddle link http://jsfiddle.net/banded_krait/AZK5d/2/

    Kannst du ein Beispiel in einem js fiddle?
    Ich aktualisiert meine Antwort und fügte JSFiddle link.

    InformationsquelleAutor interstellarDust

Schreibe einen Kommentar