Добавьте непрозрачность кругового затухания (эффект виньетки) к изображениям в CSS. ⇐ CSS

[Anonymous]

Я хочу придать изображению круглую непрозрачность с помощью CSS.

Я знаю, что могу добиться непрозрачности для таких изображений: р>

Код: Выделить всё

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

Я знаю, что могу создать такие круглые изображения:

Код: Выделить всё

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

Я хочу каким-то образом объединить две вещи выше и применить непрозрачность только к краям изображения, чтобы центр изображения почти ничего не получал от тега непрозрачности. Я искал несколько часов, но ничего не нашел.

Без непрозрачности: http://jsfiddle.net/8w6szf84/47

С непрозрачностью: http://jsfiddle.net/8w6szf84/48/ -> плохая непрозрачность, хочу, чтобы исчезали только края...

Нужно ли мне использовать Javascript на этом? Есть предложения?

Подробнее здесь: https://stackoverflow.com/questions/276 ... ges-in-css