html – Is it possible to make the background transparent for clicks?


I'm trying to make a game when I need to find blocks, and on top of it, the background gradually darkened and darkened. Therefore, the top layer needs to be transparent for clicks, but its appearance could be changed. And the bottom layer would work like a normal html page.


You can use pointer-events: none; for background:

.background {
  background-color: #f80;
  height: 100%;
  opacity: .5;
  pointer-events: none;
  position: absolute;
  width: 100%;

a {
  display: inline-block;
  margin: 24px;
<div class="background"></div>
<a href="#" onclick="alert('Click')">Click</a>
Scroll to Top