CSS或JavaScript以突出显示图像不透明度的某些区域

Question

我正在尝试使用CSS或JavaScript来做like this。

我需要突出显示图像的特定部分，但是我发现的所有内容都是如何在Photoshop中进行处理。我可以用CSS还是JavaScript做到这一点？

我什至在问正确的问题吗？

编辑：

这里是great submission，但我有一个后续问题：

我需要此功能用于移动设备，以及许多设备的纵向和横向视图，例如：iOS，iPad，Android，WebOS，Etc等。因此，我不确定固定位置是否可以使用。

有什么建议吗？

Answer 1

您可以使用绝对定位的div使用背景位置，如下所示：

CSS：

.container {
    position:relative;
    height:455px;
    width:606px;
}

.container div {
    position:absolute;
    background-image:url(http://www.beachphotos.cn/wp-content/uploads/2010/07/indoensianbeach.jpg);
}

.container .bg-image {
    opacity:0.3;
    height:455px;
    width:606px;
}

.container div.highlight-region {
    height:50px;
    width:50px;
    opacity:0;
}

.container div.highlight-region:hover {
    opacity:1;
}

HTML：

<div class="container">
    <div class="bg-image"></div>
    <div class="highlight-region" style="top:50px;left:50px;background-position: -50px -50px;"></div>
    <div class="highlight-region" style="top:150px;left:150px;background-position: -150px -150px;"></div>
</div>

请参见http://jsfiddle.net/MT4T7/示例

[beachphotos.com为使用其图像而致谢。

编辑（响应OP注释）：另请参阅http://jsfiddle.net/zLazD/我关闭了悬停方面。还添加了一些边框。

CSS更改：

.container div.highlight-region {
    height:50px;
    width:50px;
    border: 3px solid white;
}

/* removed :hover section */

Answer 2

您可能会伪造它，这是一个示例：http://jsfiddle.net/erick/JMBFS/3/

我用不透明的元素覆盖了图像。元素的颜色与图像的背景相同。使用z-index将其放在顶部。

Answer 3

您当然可以。例如，大多数裁剪插件都将“突出显示”作为其UI的基础。因此，对于完整的跨浏览器解决方案，只需使用现有的插件，例如Jcrop。

当然，您可能希望对其进行修复，在这种情况下，您可以通过编程方式告诉插件要突出显示哪个部分，并且用户不应该移动它，然后它将用作荧光笔，而不是割草机。

Answer 4

这些是您可以用来突出显示图像的一部分的步骤：

1. 使用JavaScript访问图像，并在其后立即动态添加another相同图像。 （这可以仅在HTML中完成，但会更改标记的语义）
2. 将第二张图像放置在第一张图像上
3. 在第二个图像上应用css遮罩，以便仅显示“突出显示”的部分
4. 当用户将鼠标悬停在图像容器上时，调整第一张图像的不透明度。

如果需要，我可以稍后提供更多技术细节。

Answer 5

如何将裁切后的图像（不透明度为100％）覆盖在整个图像（不透明度为30％）之上？

此答案仅是概念证明

body {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
.img {
  position: absolute;
  top: 0;
  left: 0;
}
.img-base {
  opacity: 0.3;
  z-index: -99;
}
.img-overlay {
  opacity: 1.0;
}
.cropper{
  width: 150px; /* input width and height of the box here */
  height: 120px;
  overflow: hidden;
  position: relative;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  left: 90px; top: 170px; /* input starting location of the box here */
}
#overlay1 {
  position: absolute;
  left: 0px; right: 0px;
  margin-left: -90px; margin-top: -170px; /* input starting location of the box here */
}

<img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"  class="img img-base">

<div class="cropper">
  <img src="https://images.unsplash.com/photo-1583355862089-81e9e6e50f7a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"  class="img img-overlay" id="overlay1">
</div>