Update 3

Hallo Leute, ich habe dasCod (http: //codepen.io/anon/pen/VYRJL) und jetzt sehen die Kanten wirklich wie zerrissenes Papier aus. Es verwendet übrigens SVG.

Das einzige Problem ist, dass ich nicht weiß, wie ich das Bild als Hintergrund für das SVG verwenden soll, um die zerrissenen papierähnlichen Kanten zu erhalten.

Bitte schau es dir an. Alle Bemühungen werden geschätzt.

Update 2

Es scheint, dass es unmöglich ist, diesen Effekt ohne die Hilfe von PhotoShop (PS) zu erzielen. Deshalb möchte ich PS als Teil der Lösung hinzufügen.

Ich bin kein PS-Experte, aber von einem kurzen Gedanken aus denke ich, dass ich ein paar Schritte tun muss:

Verwenden Sie PS, um eine "Muschel" aus zerrissenem Papier zu erstellen. Sagen wir, es ist eine Muschel. Der innere Bereich ist transparent, so dass wir das Bild darin platzieren können.Legen Sie shell.png oben auf das Bild, sagen wir banner.jpg, was bedeutet, dass der Z-Index des Divs, das Shell als Hintergrundbild verwendet, auf 1 gesetzt wird.Verwenden Sie ein anderes Div, um die Datei banner.jpg zu enthalten, und legen Sie den Z-Index unter dem Shell-Div fest.

Fragen für diesen Ansatz:

Ist es ansprechbar?

Wenn nicht, ist es möglich, es reaktionsfähig zu machen? Da muss ich dafür sorgen, dass es auf mobilen Geräten einwandfrei funktioniert.

Ich erinnere mich, dass ich eine wunderschön gestaltete Website gesehen habe. Im Hintergrund ist ein Bild zu sehen, und die Ränder dieses Bildes sehen aus wie zerrissenes Papier. Das ist fantastisch!

Ich habe hier nach ähnlichen Fragen gesucht, aber es stellte sich heraus, dass die Effekte in den Antworten primitiv sind, was sehr einfache, raue schwarze Linien sind.

Was ich möchte

Ich möchte, dass dieses Bild so breit ist wie der Bildschirm des Geräts, was bedeutet, dass es reagiert.ie Ränder dieses Bildes sehen aus wie zerrissenes PapieIch platziere dieses Bild als Banner nach der oberen Navigationsleiste, aber vor dem Inhalt.

Es sollte wie der weiße Bereich in diesem Bild aussehen. Aber in meinem Fall muss ich mein Bild ausfüllen, um den weißen Bereich zu ersetzen.

Hier ist mein Code: Hinweis: In diesem Code verwendet die CSS ein Bild als Rand, ABER das will ich nicht. Ich möchte nur, dass die Kanten reine CSS-Effekte sind. (Ist das möglich?) Also sieht es so aus (auf der rechten Seite sehen Sie, dass es keine weißen, rauen Kanten gibt)

<div class="row">
    <div id="letter" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

    </div>
</div>

#letter { /*torn paper border*/
    height:450px;
    position:relative;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-image:url('img/background.jpg');
    background-size:cover;
    opacity:0.8;
    border-style: solid; 
    border-width: 40px 40px 40px; 
       -moz-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
    -webkit-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
         -o-border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat; 
            border-image: url('http://news.unchealthcare.org/images/backgrounds/paper.jpg') 80 80 80 repeat;
}

Aktualisiere

Hallo Leute

Ich glaube, ich habe etwas gefunden, das meiner Vorstellung sehr ähnlich ist. Hier ist der Effekt, den ich will: