CSS或JavaScript来突出显示图像不透明度的某些区域 [英] CSS or JavaScript to highlight certain area of image opacity

问题描述

我想要做一些事情像这样，但使用CSS或JavaScript。

I'm looking to do something like this but with CSS or JavaScript.

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

I need to highlight a certain part of an image but everything I find is how to do it in Photoshop. Can I do this with CSS or maybe JavaScript?

我是否提出正确的问题？

Am I even asking the right question?

编辑：

这里是一个伟大的提交，但我有一个跟进问题：

Well here is a great submission but I have a follow up question:

我需要这个移动设备和纵向和横向视图对于许多设备，例如：iOS，iPad，Android，WebOS，等...所以固定的位置，我不知道会工作。

I need this for a mobile device and portrait and landscape views as well for many devices like: iOS, iPad, Android, WebOS, Etc... So the fixed position I'm not sure will work.

任何建议？ p>

Any advice?

推荐答案

您可以使用绝对定位的div的background-position如下：

You could use background-position with absolutely positioned divs as follows:

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。

Credit to beachphotos.com for using their image.

EDIT（回应OP评论）：另请参阅 http： //jsfiddle.net/zLazD/ 我关闭了悬停方面。也添加了一些边框。

EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/ I turned off the hover aspect. also added some borders.

CSS变更：

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

/* removed :hover section */

这篇关于CSS或JavaScript来突出显示图像不透明度的某些区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！