javascript - 如何使CSS背景图像变暗，但保持光标周围区域更明亮

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        2年前关闭。
                                                                                            
                
        
如何使用CSS或JS使固定的背景变暗，但使光标周围的区域稍微变亮，从而产生手电筒效果？似乎无法弄清楚。谢谢。

最佳答案

编辑：正如@Rob在下面说的那样，请始终先尝试自行回答问题。这仅仅是一个实现建议，不应盲目复制。



我认为您可以使用JS在鼠标下创建一个具有径向渐变的CSS元素。

window.onload = function() {
  var flashlight = document.querySelector('#flashlight');
  window.addEventListener('mousemove', function(event) {
    flashlight.style.left = (event.pageX-25) + 'px';
    flashlight.style.top = (event.pageY-25) + 'px';
  });
};

body, html {
  margin: 0;
  padding: 0;
  background-image: url('https://scontent-lga3-1.xx.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=78a75ea8fe74295d8087eff97dbcef5a&oe=5AF0967D');
  background-size: cover;
  height: 100%;
}
#mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
#flashlight {
  height: 50px;
  width: 50px;
  position: absolute;
  background-image: radial-gradient(white 0%, transparent 50%);
}

<!-- darken background -->
<div id='mask'></div>

<!-- flashlight effect -->
<div id='flashlight'></div>