div.layer { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.46); } div.layer > div { top: 156px; left: 248px; width: 345px; height: 256px; display: block; position: fixed; background-color: rgba(255, 255, 255, 0.54); } 
 <div class="layer"> <div></div> </div>

As you can see the container is stretched across the whole page and it is a bit transparent black. It is necessary to ensure that the child element is completely transparent regardless of what color div.layer.

Now it looks like this: It looks like now

That is, the color of the child element is considered to be from the color of the parent => it is impossible to make it completely transparent. How to solve this problem?

Using JavaScript is allowed. But to draw dark stripes on the left, on the right, on the bottom and on top, so that an “unpainted” piece remains in the middle - no.

  • Comments are not intended for extended discussion; conversation moved to chat . - Nick Volynkin ♦

2 answers 2

There is such an option

 div.layer { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } div.layer div { top: 156px; left: 248px; width: 345px; height: 256px; display: block; position: fixed; box-shadow: 0 0 0 1024px rgba(0, 0, 0, 0.5); } 
 дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> дывоаыщшваоasdaskdhaisudhaidufhsidufhsidjfsdufhsidfusdifuhsdfuhsdifsdfsdfsdfdhfgh<br> <div class="layer"> <div></div> </div>

  • why the cursor disappears: D - Vasily Barbashev
  • No, this solution is not suitable. There is even no blackout itself. - smellyshovel
  • @ Vasily Barbashev, the element overlaps the cursor. If you need text selection, you will have to do around the area 4 objects with dimming - Mr. Black
  • @MatveyMamonov, added an option with the ability to select text, but then in a dark background you can select it - Mr. Black
  • @ Vasily Barbashev, the cursor does not disappear, just the color is such that inverting it gives it. - Qwertiy ♦

Something like that from the example in the comments

http://codepen.io/korolariya/pen/pbJRWK

 body .loader_overlay { width: 150px; height: 150px; background: transparent; box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset; border-radius: 100%; z-index: -1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }

Perhaps you are looking for something like http://codepen.io/hugo/pen/jFzqm

http://codepen.io/dani3lsz/pen/NNYvRM

  • the option does not work, I added text inside, it cannot be selected - Vasily Barbashev
  • do another div inside - Serge Esmanovich
  • So you propose to generate a "hole" with the help of the box-shadow box? - smellyshovel
  • @SergeEsmanovich I said, I have already tried, your version does not work - Vasily Barbashev
  • look at the link I updated - Serge Esmanovich