6

Ситуация такая что есть блок с background, нужно в нем сделать отверстие(прозрачное) чтобы можно было наблюдать что за фоном.

Есть ли реализация без внедрения png svg и тд? Видел такую реализацию, но так и не понял как это было сделано

Есть ли какие-то идеи?

15

1 ответ 1

7

Можно попробовать с помощью псевдоэлемента :after и огромной непрозрачной тени:

  #hole {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
  }

  #hole:after {
    content: "";
    position: absolute;
    border-radius: 100%;
    width: 300px;
    height: 300px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 0px 2000px #000;
  }

  body {
    background: url('https://wallpaperbrowse.com/media/images/Wallpaper-1.png');
    background-size: cover;
  }
<html>
  <body>
	  <div id="hole" ></div>
  </body>
</html>

4
  • а "так" - это как? 15 окт 2017 в 20:59
  • С помощью :after, там же видно. Или нужно каждый ответ сопровождать очевидными комментариями? Могу поправить, если требуется.
    – n3r0bi0m4n
    15 окт 2017 в 21:01
  • 4
    Ну вы тут знанием делитесь или выпендриваетесь? Да нужно пояснение, потому что если для вас тут все очевидно, то другим, кто ищет ответ на такую же проблему - вообще не ясно. Что делает after, почему так. 15 окт 2017 в 21:04
  • @АлексейШиманский :after потому что лень отдельный элемент создавать
    – Alex78191
    15 окт 2017 в 21:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.