Fügen Sie Bildern in CSS eine kreisförmige, verblassende Deckkraft (Vignetteneffekt) hinzu ⇐ HTML

[Guest]

Ich möchte einem Bild mithilfe von CSS eine kreisförmige Deckkraft verleihen.

Ich weiß, dass ich bei Bildern wie diesem eine Deckkraft erzielen kann:

Code: Select all

.circle img {
opacity: 0.4;
filter: alpha(opacity=40);
}

Ich weiß, dass ich kreisförmige Bilder wie dieses erzielen kann:

Code: Select all

.circle {
border-radius: 50%;
display: inline-block;
}
.circle img {
border-radius: 50%;
display: block;
}

Ich möchte die beiden oben genannten Dinge irgendwie zusammenführen und die Deckkraft nur auf die Ränder des Bildes anwenden, sodass die Bildmitte fast nichts vom Deckkraft-Tag erhält. Ich habe stundenlang gesucht, aber nichts gefunden.

Ohne Deckkraft: http://jsfiddle.net/8w6szf84/47

Mit Deckkraft: http://jsfiddle.net/8w6szf84/48/ -> schlechte Deckkraft, nur die Kanten sollen verblassen...

Brauche ich um Javascript zu verwenden Das? Irgendwelche Vorschläge?