如何使CSS背景图像变暗，但保持光标周围的区域更亮 [英] How to darken a CSS background image but keep area around cursor brighter

问题描述

如何使用CSS或JS使固定的背景变暗，但使光标周围的区域稍微变亮，从而产生手电筒效果?似乎无法弄清楚.谢谢.

How can I use CSS or JS to make a fixed background darker but keep the area around the cursor slightly lighter so it gives a flashlight type effect ? Cant seem to figure it out. Thank you.

推荐答案

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

edit: as @Rob has said below, always try to answer questions on your own first. This is merely an implementation suggestion and should not be copied mindlessly.

我认为您可以使用JS将鼠标保持在径向渐变的CSS元素上.

I think you can create a CSS element with a radial gradient that you keep under your mouse with JS.

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>

这篇关于如何使CSS背景图像变暗，但保持光标周围的区域更亮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！