如何突出图像的一部分并模糊其余部分？答案

【问题标题】：How to highlight part of an image and blur the rest?如何突出图像的一部分并模糊其余部分？
【发布时间】：2015-07-08 13:04:29
【问题描述】：

我正在寻找一种方法来获得与上述类似的效果，但使用 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>

【问题讨论】：

标签： javascript css image highlight blur

【解决方案1】：

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

分隔

所以，使用我的代码，你想要的是这样的：

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

要使照片突出，请给照片一个高 z-index，然后有一个 position:fixed div，它的 z-index 低于所选项目。

Here's some more code 我发现它演示了如何实现这种模糊效果，不过比我的要复杂一些。

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

【讨论】：

【解决方案2】：

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

所以你会：

[查看者]

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

如果您需要帮助，其他人将不得不帮助您处理实际的 JS。

【讨论】：