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

我希望做一些事情，但与CSS或JavaScript

我需要突出显示图像的某一部分，但我发现的一切都是如何在Photoshop中完成的。我可以用CSS或者JavaScript来实现吗

我问对问题了吗

编辑：

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

我需要一个移动设备和纵向和横向视图，以及许多设备，如：iOS，iPad，Android，WebOS等。。。所以我不确定这个固定的位置是否有效

---

有什么建议吗？

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

CSS:

HTML:

---

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

---

当然，您可能希望它是固定的，在这种情况下，您可以通过编程告诉插件要高亮显示哪个部分，并且用户不应该移动它，然后它将充当高亮显示器，而不是裁剪器。

以下是您可以采取的高亮显示图像部分的步骤：

访问JavaScript中的图像，并在图像之后立即动态添加另一个相同的图像。（这可以在HTML中完成，但会改变标记的语义）

将第二个图像放置在第一个图像上

在第二个图像上应用css掩码，以便只显示“突出显示”的部分

当用户将鼠标悬停在图像容器上时，调整第一幅图像的不透明度

---

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

您可能会伪造它，下面是一个示例：

---

我用不透明的元素覆盖了这张图片。元素的颜色与图像的背景相同。使用z索引将其置于顶部

将裁剪后的图像（不透明度为100%）覆盖在整个图像的顶部（不透明度为30%）怎么样

这个答案只是概念的证明

正文{
保证金：0；
填充：0；
}
.img{
位置：绝对位置；
排名：0；
左：0；
}
.img基地{
不透明度：0.3；
z指数：-99；
}
.img覆盖{
不透明度：1.0；
}
.庄稼汉{
宽度：150px；/*在此输入框的宽度和高度*/
高度：120px；
溢出：隐藏；
位置：相对位置；
填充：0；
保证金：0；
左：90px；顶：170px；/*在此输入框的起始位置*/
}
#叠加{
位置：绝对位置；
左：0px；右：0px；
左侧边距：-90px；顶部边距：-170px；/*在此输入框的起始位置*/
}

谢谢，是的，我希望图像突出显示某个部分，而其余部分则较暗但透明。我需要一张图片，因为这是一个移动网站，我想减少加载时间。我刚刚编辑了前两张，因为最后一张是最好的。包含一个指向工作示例的链接。请注意，在我的示例中，区域仅在悬停时突出显示。还添加了一个“始终打开”区域。这正是我想要的，但没有悬停：你也可以看到我对问题的更新吗？是的。我看你需要手机。在这种情况下，不需要悬停特性。你只需要高光区域被适当地定位（没有不透明度的变化）我喜欢这种方法，但我有另一个后续问题。这是针对移动设备的，如何对其进行纵向和横向视图编码？在多个设备上，如iOS、iPad、Android等。在示例代码中，图像应始终位于左上角，而不管方向如何，只要您在HTML上实现。如果你正在使用本机iOS或本机Android应用程序，我真的帮不了你多少忙，因为我还没有在这些平台上工作。

.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;
}

<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>

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

/* removed :hover section */