Bewerben weichen Rändern-Bild mit CSS

Ein Bild, ist es ein Weg, um erweichen die Kanten mit css? Oder durch einige js-Bibliothek (obwohl css wäre bevorzugt)? Die Idee ist, dass die Kanten des Bildes sollte Weichzeichner auf Transparenz, damit Sie besser mit dem hintergrund.

Beispiel Originalbild:

Bild mit weiche Kanten:
Bewerben weichen Rändern-Bild mit CSS

Gibt es viele ähnliche Fragen auf stackoverflow, aber keiner (finde ich) bieten eine Antwort, genau das zu tun. Meistens sind Sie besorgt, mit der Unschärfe des gesamten Bildes oder setzen Sie einen semi-transparenten Rand auf dem Bild, weder das, was ich Suche.

warum nimmst du nicht das Bild Bearbeiten in photoshop/gimp so Aussehen, und legen Sie die img innerhalb eines div-container?
Denn die Bilder, die user hochgeladen und der Effekt angewendet werden soll zur Laufzeit.
Ich möchte nur sagen, dass ich nicht die Titel, die zu dieser Frage. Die ursprüngliche Frage war, "anwenden weichen Rändern-Bild mit css", weil "weiche Kanten" ist der name, mit dem kenne ich diesen Effekt (es ist, was das heißt in MS Word, die ich verwendet, um das Beispiel). Ich kann mir vorstellen es ist der name, den andere Menschen wissen es, wie, sowie, wer nun wieder eine härtere Zeit der Suche nach den unten Antworten. Scheint eine Schande. Auch die typo im Titel "Applz" ist eine unglückliche finger zucken des Editors. @DJDavid98: warum hast du das Gefühl es ist notwendig, zu Bearbeiten meine Frage, die schien perfekt auf den Punkt?
Feder ist in den meisten der erweiterten Bild-Bearbeitungs-Programme, wie Photoshop, wenn ich mich richtig erinnere. Wenn Sie nicht übereinstimmen, fühlen Sie sich frei, es zu ändern zurück. Auch, sorry für die Tippfehler, ich habe es jetzt korrigiert.
Ich Stimme nicht in dem Sinne, dass es in der Tat mehr Informationen zur Verfügung stehen, sobald Sie wissen, das Stichwort "Feder", aber das ist nur sinnvoll, wenn Sie wissen, dass das Schlüsselwort. Für nicht-Bild-Editoren, einen "weichen Rand" ist viel intuitiver Begriff - auch das, was in MS Word benutzt wird - hier starten wir unsere Suche aus.

InformationsquelleAutor mcProgrammer | 2015-03-28

Können Sie versuchen, so etwas wie dieses:

JSFiddle-Beispiel

HTML :

<div id="image-container"><div>

CSS:

#image-container {
background: url(http://pic2.ooopic.com/11/26/30/31b1OOOPIC48.jpg) left top no-repeat;
box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset; 
width: 300px;
height: 300px;
}

InformationsquelleAutor Konrud

Können Sie versuchen, diese: fiddle

<div class="shadow">
        <img src="http://via.placeholder.com/350x150/" />
</div>

Und CSS-Dateien.

shadow
{
    display:block;
    position:relative;
}

img {
    width: 100%;
    height: 100%;
}

.shadow:before
{
    display:block;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    -moz-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
    -webkit-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
    box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
}

InformationsquelleAutor fcastillo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.