Question

如何更改图像中特定区域的背景颜色或不透明度？

这里是我的HTML，javascript＆amp; CSS

＆＃13;

function myFunction()
{
    document.getElementById('testid').setAttribute("class", "style1");
}

＆＃13;

.style1{
background: red
}

＆＃13;

<img src="http://mridulahuja.com/uploads/1/3/8/6/13860206/_____2659642_orig.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map" href="www.mridulahuja.com">
    <area alt="" title="" href="#" shape="poly" id="testid" onlcick="myFunction()" coords="117,36,162,20,193,34,189,55,108,55" />

 <area alt="" title="" href="#" shape="poly" coords="33,93,33,119,32,143,32,169,32,186,31,191,94,194,123,194,149,193,164,193,158,119,186,119,216,118,227,115,224,82,103,83,31,82" />
    
</map>

＆＃13;

我尝试了不透明度，但似乎没有任何效果。有什么想法吗？

查看jsfiddle

Answer 1

您无法使用图片地图执行此操作，因为area不支持您想要的CSS属性。您应该尝试创建一个基本相同的CSS地图绝对定位div s或锚定在定位的img上。有很多在线工具可以帮助您 - 例如this one。

代码应该是什么样子的示例：

<div style="position:relative; width..., height... background:url(..your image...)">

    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>
    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>
    <a class="area" style="display:block; top:..., left:..., height:..., width:..."></a>

</div>

用css：

a.area:hover{background:red;}

当您需要突出显示具有边框，背景甚至css3属性（如发光效果）的区域时，通常会使用CSS贴图，并且还会在不支持图像贴图的地方使用CSS地图，例如Facebook FBML标签等。

Answer 2

图像上的svg剪辑路径（帮助：clip-path-generator）和没有剪辑路径的blury克隆，两者都在容器内。添加了低不透明度的颜色层，使高光更加清晰。 - jsfiddle -

ps.1：在此剪辑路径生成器上，您可以单击桌面上的图片并将其拖动到画布中。您可以轻松地在网络上找到更多剪辑路径生成器，如this one。

ps.2：您可以在图形软件（如Inkscape或Adobe Illustrator）上构建svg形状。

body {
  margin: 0;
  background: honeydew;
}

.container {
  position: relative;
  vertical-align: bottom;
  display: inline-block;
  border: 4px solid indigo;
  box-sizing: border-box;
  overflow: hidden;
}

.color {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  background-color: indigo;
  opacity: 0.2;
}

.back {
  -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
  filter: blur(2px);  
}

.clipped {
  position: absolute;
  top:0;
  left:0;
}

#clip1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(25px 250px,70px 250px,70px 285px,260px 285px,260px 250px,160px 250px,160px 115px,225px 115px,225px 90px,160px 90px,160px 70px,25px 70px);

/*Firefox*/
clip-path: url("#clipPolygon");

/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTI1LDI1MCBMNzAsMjUwIDcxLDI4NSAyNjAsMjg1IDI2MSwyNTAgMTYwLDI1MCAxNjAsMTE1IDIyNSwxMTUgMjI1LDkwIDE2MCw5MCAxNjAsNzAgMjUsNzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0yNSwyNTAgTDcwLDI1MCA3MSwyODUgMjYwLDI4NSAyNjEsMjUwIDE2MCwyNTAgMTYwLDExNSAyMjUsMTE1IDIyNSw5MCAxNjAsOTAgMTYwLDcwIDI1LDcwIHoiICAvPgo8L3N2Zz4=) no-repeat;
}

<div class=container>
<img class=back src="http://i.imgur.com/rjFPR2d.jpg" alt=img>
  <div class=color></div>
<img id=clip1 class=clipped src="http://i.imgur.com/rjFPR2d.jpg" alt=img>

</div>
  
<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="25 250,70 250,70 285,260 285,260 250,160 250,160 115,225 115,225 90,160 90,160 70,25 70">
    </polygon>
  </clipPath>
</svg>

一个更简单的版本，带有单个图像，没有滤镜，没有剪辑路径，使用在Adobe Illustrator上构建的实体svg形状：

.container {
  position: relative;  
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}
polygon {
  cursor: pointer;
  opacity: 0.6;
  fill: green;
}

polygon:hover {
  opacity: 0.8;
  fill: red;
}

<div class=container>
  
<img class=back src="http://i.imgur.com/rjFPR2d.jpg" alt=img>
  
<svg x="0px" y="0px" width="317px" height="327px" viewBox="0 0 317 327">
<polygon fill="#FF0000" points="24,252 24,70 164,70 164,91 223,91 223,119 164,119 164,252 "/>
</svg>
  
</div>

在HTML中更改所选区域的背景颜色/不透明度

2 个答案: