Verwischen Sie die Kanten eines Bildes oder Hintergrundbildes mit CSS

Question

Ich weiß, dass es eine Reihe neuer CSS-Filter gibt und ich frage mich, ob es eine Möglichkeit gibt, diese auf ein Bild oder Hintergrundbild anzuwenden. Alles, was ich gelesen habe, spricht davon, das Bild mit einem Schlagschatten aufzuweichen. Ein Schlagschatten ist jedoch eine Farbe, und ich möchte die Kanten von Bildern verwischen, damit ich sie nahtloser zusammenfügen kann, wenn sie nebeneinander liegen. Im Moment sieht es so aus, als könnten Sie nur mit einem Schlagschatten gehen oder eine Unschärfe auf das gesamte Bild anwenden (basierend auf dem, was ich gelesen habe).

Der nächstgelegene ich mit oben kommen kann ist ein semi-transparenten Box Schatten .... wie diese

-webkit-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 
-moz-box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 
box-shadow: 12px 29px 81px 0px rgba(0,0,0,0.75); 

Answer 1

Ich bin nicht ganz sicher, welche visuelle Ende führen Sie nach, aber hier ist eine einfache So verwischen Sie die Bildkante: Platzieren Sie ein Div mit dem Bild innerhalb eines anderen Div mit dem unscharfen Bild.

Arbeitsbeispiel hier: http://jsfiddle.net/ZY5hn/1/

HTML:

<div class="placeholder"> 
    <!-- blurred background image for blurred edge --> 
    <div class="bg-image-blur"></div> 
    <!-- same image, no blur --> 
    <div class="bg-image"></div> 
    <!-- content --> 
    <div class="content">Blurred Image Edges</div> 
</div> 

CSS:

.placeholder { 
    margin-right: auto; 
    margin-left:auto; 
    margin-top: 20px; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    /* this is the only relevant part for the example */ 
} 
/* both DIVs have the same image */ 
.bg-image-blur, .bg-image { 
    background-image: url('http://lorempixel.com/200/200/city/9'); 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height:100%; 
} 
/* blur the background, to make blurred edges that overflow the unblurred image that is on top */ 
.bg-image-blur { 
    -webkit-filter: blur(20px); 
    -moz-filter: blur(20px); 
    -o-filter: blur(20px); 
    -ms-filter: blur(20px); 
    filter: blur(20px); 
} 
/* I added this DIV in case you need to place content inside */ 
.content { 
    position: absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    color: #fff; 
    text-shadow: 0 0 3px #000; 
    text-align: center; 
    font-size: 30px; 
} 

Beachten Sie den verschwommenen Effekt usin ist g das Bild, so ändert es sich mit der Bildfarbe.

Ich hoffe, das hilft.

Answer 2

Wenn Sie nur die Bildkanten verwischen möchten, können Sie einfach den Box-Schatten mit einem Einsatz verwenden.

Arbeitsbeispiel: http://jsfiddle.net/d9Q5H/1/

HTML:

<div class="image-blurred-edge"></div> 

CSS

.image-blurred-edge { 
    background-image: url('http://lorempixel.com/200/200/city/9'); 
    width: 200px; 
    height: 200px; 
    /* you need to match the shadow color to your background or image border for the desired effect*/ 
    box-shadow: 0 0 8px 8px white inset; 
}