Как добиться такого результата?

Question

[animous]

Возможно ли реализовать такое с помощью css и js?
Что бы в круге не было затемнения.

Структура будет примерно такая:
Идет фон (карта)
Потом слой наложения(затемнение)
И потом блок, он должен просвечивать слой наложения-затемнения.

Answer 1

[lemme]

.circle {
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);
}

https://jsfiddle.net/b800vkap/

Единственный минус, родитель будет прокликиваться.

Comments

[animous]

Спасибо, вроде подходит. Буду пробовать.

[ILoveYAnny]

Можно сделать return false на JS, при клике на родителя

[Антон Мудренок]

animous: можно и без shadow сделать двумя картинками. Тучу таких примеров видел: codepen.io/mrspok407/pen/wGOVQx?editors=0100

[lemme]

Антон Мудренок: да вариантов уйма, но зачем извращаться ?

[Антон Мудренок]

animous: еще один пример codepen.io/suez/pen/PwKZwO?editors=0100

[Антон Мудренок]

lemme: т.е. делать тень со spread 9999px это не извращение, а bg-image это именно оно))

[animous]

Антон Мудренок: Спасибо, хорошее решение!

Answer 2

[xmoonlight]

codepen.io/chriscoyier/pen/41d6e36ac584ee0401064d1...

Answer 3

[Viktor]

Посмотри здесь

Answer 4

[Антон Шаманов]

элементарно, border-radius, памятка https://habrahabr.ru/post/126207/

Comments

[animous]

Как круг сделать я знаю. Вопрос дополнил.

[Антон Шаманов]

animous: насколько я знаю такого просвечивания не существует. зачем делать доп слой не понятно.