Question

我正在使用＆＃34;隐藏＆＃34;图片。我使用黑色覆盖隐藏图像，但现在我希望光标能够透过暗覆盖。

这里有一个几乎可以运作的例子：https://jsfiddle.net/swx5x38j/

我想知道的是，我如何通过黑暗叠加div使光线div看起来。这是不可能的，或者我应该采取不同的解决方案？有些人对这样的暗示吗？

此处的代码如下。首先是CSS：

sorted

jquery如下

* {
  margin: 0;
  padding: 0;
}

#image {
  background: url(https://placeimg.com/640/480/animals) center no-repeat;
  width: 800px;
  height: 600px;
}

#overlay {
  opacity: 0.9;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

#light {
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background: #fff;
}

最后的HTML

    $(document).mousemove(function(event) {
    $('#light').offset({
        top: event.pageY - 50,
        left: event.pageX - 50
    });
});

Answer 1

而不是叠加，你可以使用box-shadow：

$(document).mousemove(function(event) {
  $('#light').offset({
    top: event.pageY - 50,
    left: event.pageX - 50
  });
});

* {
  margin: 0;
  padding: 0;
}

#image {
  background: url(https://placeimg.com/640/480/animals) center no-repeat;
  width: 800px;
  height: 600px;
}



#light {
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;box-shadow:0 0 0 3000px rgba(0,0,0,0.9);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image"></div>
<div id="light"></div>

Answer 2

您可以创建假图像并计算背景图像的偏移量，如下所示：

CSS

* {
  margin: 0;
  padding: 0;
}

.image {
  background: url(https://placeimg.com/640/480/animals) center no-repeat;
}

#image {
  width: 800px;
  height: 600px;
  top:0px;
  left:0px;
}

#overlay {
  opacity: 0.9;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

#fakeImage {
  position:absolute;
  width: 800px;
  height: 600px;
}

#light {
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: #fff;
  overflow:hidden;
}

HTML

<div id="image" class="image"></div>
<div id="overlay"></div>

<div id="light" style="display:none;">
  <div id="fakeImage" class="image"></div>
</div>

JS

$(document).mousemove(function(event) {
  $('#light').offset({
    top: event.pageY - 50,
    left: event.pageX - 50
  });
  var _top = (- $('#light').offset().top) + 'px';
  var _left = (- $('#light').offset().left) + 'px';

  $('#fakeImage').css({'top': _top, 'left': _left });

});

随机图像需要具有相同图像的唯一类。

JSFiddle example

Answer 3

为#light添加一个大量边框并添加一个负边距：

https://jsfiddle.net/mpcmvej6/

删除#overlay。这种方法对我来说似乎最简单。关于这种方法的好处是不需要支持框阴影，也不需要第二个图像元素。

另一种方法是将图像的副本放在#light中，并将其移动到与#light相反的方向。

透过暗覆盖css和jquery看

3 个答案: