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

【问题标题】：CSS or JavaScript to highlight certain area of image opacityCSS 或 JavaScript 突出显示图像不透明度的某些区域
【发布时间】：2011-07-04 09:49:36
【问题描述】：

我正在寻找 like this 做一些事情，但使用 CSS 或 JavaScript。

我需要突出显示图像的某个部分，但我发现的只是如何在 Photoshop 中完成。我可以用 CSS 或 JavaScript 做到这一点吗？

我问对了问题吗？

编辑：

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

我需要将它用于移动设备以及纵向和横向视图以及许多设备，例如：iOS、iPad、Android、WebOS 等...所以我不确定固定位置是否有效。

有什么建议吗？

【问题讨论】：

标签： javascript css image image-manipulation opacity

【解决方案1】：

您可以将 background-position 与绝对定位的 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 */

【讨论】：

谢谢，是的，我希望图像突出显示某个部分，而其余部分较暗但透明。我需要一张图片，因为它是用于移动网站的，我想减少加载时间。
我刚刚删掉了前两个，因为最后一个是最好的。包括一个工作示例的链接。请注意，在我的示例中，区域仅在悬停时突出显示。
还添加了一个“永远在线”区域
这正是我想要的，但没有悬停：jsfiddle.net/MT4T7 你还能看到我对问题的更新吗？
是的。我看到你需要它的移动。在这种情况下，不需要悬停方面。您只需要适当定位突出显示区域（不更改不透明度）

【解决方案2】：

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

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

【讨论】：

我喜欢这种方法，但我还有另一个后续问题。这是针对移动设备的，如何为纵向和横向视图编码？以及在 iOS、iPad、Android 等多种设备上...
在示例代码中，只要您在 HTML 上实现，无论方向如何，图像都应始终位于左上角。如果您正在开发原生 iOS 或原生 Android 应用程序，我真的帮不上什么忙，因为我还没有在这些平台上工作。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

您可以采取以下步骤突出显示图像的一部分：

在 JavaScript 中访问图像，并在其后立即动态添加 另一个 相同的图像。（这可以只在 HTML 中完成，但它会改变你的标记的语义）
将第二张图片放在第一张图片上方
在第二张图片上应用 css 蒙版，以便只显示“突出显示”的部分
当用户将鼠标悬停在图片的容器上时，调整第一张图片的不透明度。

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

【讨论】：

【解决方案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>

【讨论】：