javascript - 尝试使用 HTML/CSS/jQuery/JavaScript 突出显示 .png 的一部分

Question

我正在尝试使用 HTML/CSS/JavaScript/jQuery 突出显示 .png 文件的一部分。我能够显示图像，但不确定如何突出显示特定部分(我不想突出显示整个图像)。

目前，我必须显示图像的 html 代码非常简单:

<img src="myImage.png" />

不要太奢侈。

要突出显示的部分必须对用户保持可见。理想情况下，我希望突出显示是一组可以通过调用特定方法/函数打开/关闭的控件。这可能吗？如果可能，如何实现？我是否需要指定要突出显示的区域的确切坐标(例如 x、y、长度、宽度)？我对此没有意见，只是我是一名网页设计新手，老实说不知道该怎么做。

Answer 1

您可以按照以下方式执行此操作: jsFiddle example

HTML

<div id="container">
    <img src="http://www.placekitten.com/200/200" />
    <div id="highlight"></div>
</div>

CSS

#container {
    position:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

此示例将 div 放置在容器内图像上方，并使用 rgba 将背景设置为部分透明。您可以通过 JavaScript 设置位置、颜色、不透明度等。