如何突出显示图像的一部分并使其余部分模糊？

Question

我正在寻找一种获得与上述类似效果的方法，但使用的是CSS + JavaScript。 理想情况下，我正在寻找给定对象的JavaScript

{
  top: 30,
  left: 10,
  width: 100
  height: 300
}

会在鼠标进入和离开事件时对图像#document产生影响，因此当鼠标悬停在图像上时，我可以突出显示图像的一部分。

到目前为止，我有以下内容：

 var highlight = function(sel, info) { $(sel).mouseenter(function() { var w = $(sel).width(); var h = $(sel).height(); $(sel + ' .box').css({ top: info.top + 'px', left: info.left + 'px', width: info.width + 'px', height: info.height + 'px', opacity: 1 }); $(sel + ' .overlay-a').css({ top: 0 + 'px', left: 0 + 'px', right: 0 + 'px', bottom: (h - info.top) + 'px', }); $(sel + ' .overlay-b').css({ top: info.top + 'px', left: 0 + 'px', right: (w - info.left) + 'px', bottom: 0 + 'px' }); $(sel + ' .overlay-c').css({ top: info.top + 'px', left: (info.left + info.width) + 'px', right: 0 + 'px', bottom: 0 + 'px' }); $(sel + ' .overlay-d').css({ top: (info.top + info.height) + 'px', left: info.left + 'px', right: (w - info.left - info.width) + 'px', bottom: 0 + 'px' }); }).mouseleave(function() { $(sel + ' .box').css({ top: 0 + 'px', left: 0 + 'px', width: 0 + 'px', height: 0 + 'px', opacity: 0 }); $(sel + ' .overlay-a, ' + sel + ' .overlay-b, ' + sel + ' .overlay-c, ' + sel + ' .overlay-d').css({ top: 'auto', left: 'auto', right: 'auto', bottom: 'auto', }); }); } highlight('#document', { top: 10, left: 10, width: 200, height: 200 }); 

 .container { position: relative; width: 600px; } .box { position: absolute; border: 2px solid black; box-sizing: border-box; z-index: 2; } .container img { width: 100%; z-index: 1; } .overlay { position: absolute; opacity: 0.5; background-color: black; z-index: 2; top: 0px; left: 0px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="document" class="container"> <img src="http://lorempixel.com/600/400" /> <div class="overlay overlay-a"></div> <div class="overlay overlay-b"></div> <div class="overlay overlay-c"></div> <div class="overlay overlay-d"></div> <div class="box"></div> </div> 

Answer 1

我制作了一个JSfiddle来演示如何实现模糊效果。 理想情况下，您想要做的是将其悬停在图像上方的位置，页面的其余部分使用模糊效果。 该页面的其余部分可以使用

因此，使用我的代码，您想要的是：

<div class=blur>
Code of other stuff
</div>
<img href="example.jpg">
<div class=blur>
More code...
</div>

要使照片突出显示，请为照片提供较高的Z索引，然后将其位置：固定div的Z索引低于所选项目。

这是我发现的更多代码 ，它们演示了如何实现这种模糊效果，但是比我的要复杂一些。

如果您还有其他问题，请随时提问。

Answer 2

我想到的第一件事是使用JS / jQuery将希望突出显示的元素的zindex更改为更高（更接近用户），并在jQuery（IIRC）中出现部分透明的覆盖显示.show（）。

因此，您将拥有：

[观众]

• 要突出显示的元素
• 半透明元素
• 主要内容

如果在那里需要帮助，其他人将不得不为您提供实际的JS帮助。