2

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

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

<img src="myImage.png" />

没有什么太奢侈的。

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

4

1 回答 1

2

您可以按照以下方式执行此操作：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 设置位置、颜色、不透明度等。

于 2013-04-28T03:13:15.327 回答