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

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

此刻，我必须要显示的图像的HTML代码很简单：

<img src="myImage.png" />

没有什么过于奢侈。

必须突出显示的部分对用户仍然可见。理想情况下，我希望突出显示是一组可以通过调用特定方法/函数打开/关闭的控件。这是可能的，如果是的话，如何？我是否需要指定想要突出显示的区域的确切坐标（例如，x，y，长度，宽度）？我对此很满意，这只是我是网页设计新手，并且诚实地不知道如何做到这一点。

来源

2013-04-28 syedfa

你是什么意思的“亮点”？你可以创建一个覆盖在图像上的半透明盒子来创建一个高光，或者你的意思是在一个区域周围放置一个边框？请解释什么会突出显示或为什么你会突出显示，所以我可以给你一些想法。 – rncrtr 2013-04-28 03:04:19

非常感谢您的及时响应。通过“突出显示”，我的意思是我想在图像的一部分周围放置一个彩色（但透明）的边框，以增强该区域所包围的区域的可见性。换句话说，前者在你的答案中，而不是后者:-) – syedfa 2013-04-28 03:06:34

你能做到这一点可见这些方针的东西：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一个骗局tainer，并使用rgba将背景设置为部分透明。您可以通过JavaScript设置位置，颜色，不透明度等。

来源

2013-04-28 03:13:15 j08691

非常感谢你的解决方案。我是否需要使用jQuery才能正常工作，如果我想单独留下颜色和区域，可以使用javascript打开/关闭此功能？ – syedfa 2013-04-28 03:20:22

不，从技术上讲，你永远不需要jQuery，因为你可以做任何jQuery在普通JavaScript中做的事情; jQuery使它变得非常容易。但要确保它是动态的，就像打开或关闭它，或者移动它，然后是的，你需要JavaScript（某种类型的）。 – j08691 2013-04-28 03:21:44

我确实需要在这里澄清。这里定义的区域如何？我看到宽度和高度已定义，但顶部和左侧又是什么？距离图像上限（即“y”坐标，“左”，“x”坐标）的距离是“顶部”？ – syedfa 2013-04-28 03:26:12

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

回答

相关问题