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

Question

我希望做一些这样的,但与CSS或JavaScript.

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

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

编辑:

那么这是一个很好的提交,但我有一个跟进问题:

我需要这个用于移动设备和纵向和横向视图以及许多设备,如: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 */