Я хочу предоставить круговую непрозрачность для изображения с помощью 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? Любые предложения?