Question

我正在寻找like this但使用CSS或JavaScript。

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

我甚至问了正确的问题吗？

编辑：

这里有great submission，但我有一个跟进问题：

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

有什么建议吗？

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

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

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

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

Answer 5

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

此答案仅是概念证明

BUILD_NUMBER

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 */
}

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

5 个答案: