CSS 或 JavaScript 突出显示图像不透明度的某些区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5119327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS or JavaScript to highlight certain area of image opacity
提问by Phill Pafford
I'm looking to do something like thisbut with CSS or JavaScript.
我希望做一些这样的，但与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?
我需要突出显示图像的某个部分，但我发现的一切都是如何在 Photoshop 中进行。我可以用 CSS 或者 JavaScript 来做到这一点吗？
Am I even asking the right question?
我什至问了正确的问题吗？
EDIT:
编辑：
Well here is a great submissionbut I have a follow up question:
好吧，这是一个很好的提交，但我有一个后续问题：
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.
对于移动设备和纵向和横向视图以及许多设备，我都需要它，例如：iOS、iPad、Android、WebOS 等......所以我不确定固定位置是否有效。
Any advice?
有什么建议吗？
回答by Jonathan Fingland
You could use background-position with absolutely positioned divs as follows:
您可以将 background-position 与绝对定位的 div 一起使用，如下所示：
CSS:
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:
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>
Please see http://jsfiddle.net/MT4T7/for an example
请参阅http://jsfiddle.net/MT4T7/示例
Credit to beachphotos.com for using their image.
感谢 beachphotos.com 使用他们的图片。
EDIT (response to OP comment): Please also see http://jsfiddle.net/zLazD/I turned off the hover aspect. also added some borders.
编辑（对 OP 评论的回应）：另请参阅http://jsfiddle.net/zLazD/我关闭了悬停方面。还添加了一些边框。
CSS changes:
CSS变化：
.container div.highlight-region {
height:50px;
width:50px;
border: 3px solid white;
}
/* removed :hover section */
回答by erickb
You can probably fake it, here is a sample: http://jsfiddle.net/erick/JMBFS/3/
您可能会伪造它，这是一个示例：http: //jsfiddle.net/erick/JMBFS/3/
I covered the image with an opaque element. The color of the element is the same as the background of the image. Used z-index to put it on top.
我用不透明的元素覆盖了图像。元素的颜色与图像的背景相同。使用 z-index 将其放在顶部。
回答by Kristian
What about overlaying the cropped image (with 100% opacity) on top of the whole image (with 30% opacity)?
将裁剪后的图像（100% 不透明度）叠加在整个图像（30% 不透明度）上怎么样？
This answer is only a proof of concept
这个答案只是一个概念证明
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>回答by davin
You sure can. For example, most crop plugins provide "highlighting" as the basis of their UI. So for a complete cross-browser solution, just use an existing plugin, like Jcrop.
你肯定可以。例如，大多数裁剪插件都提供“突出显示”作为其 UI 的基础。因此，对于完整的跨浏览器解决方案，只需使用现有插件，例如Jcrop。
Of course, you might want it to be fixed, in which case you can programmatically tell the plugin which section to highlight and that the user shouldn't be able to move it, and then it will act as a highlighter, not a cropper.
当然，您可能希望它被修复，在这种情况下，您可以通过编程方式告诉插件要突出显示哪个部分以及用户不应移动它，然后它将充当荧光笔，而不是裁剪器。
回答by zzzzBov
These are the steps you can take to highlight a part of an image:
这些是您可以用来突出显示图像的一部分的步骤：
- Access the image in JavaScript, and dynamically add anotheridentical image immediately after it. (this could be done just in HTML, but it would change the semantics of your markup)
- Position the second image over the first image
- Apply a css mask on the second image so that only the "highlighted" part shows up
- When the user hovers over the images' container, adjust the opacity of the first image.
- 在 JavaScript 中访问图像，并在其后立即动态添加另一个相同的图像。（这可以只在 HTML 中完成，但它会改变你的标记的语义）
- 将第二张图片放在第一张图片上
- 在第二张图片上应用 css 蒙版，以便只显示“突出显示”部分
- 当用户将鼠标悬停在图像的容器上时，调整第一张图像的不透明度。
I can provide more technical details on this later if need be.
如果需要，我可以稍后提供更多的技术细节。
