html怎么改变一块区域颜色,更改HTML中所选区域的背景颜色/不透明度

ima上的svg剪辑路径(帮手：clip-path-generator) ge和一个没有剪辑路径的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;

}

简化版本的它，用一个单一的形象，不带过滤器，无夹路径，使用内置的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;

}