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;
}
總結
以上是生活随笔為你收集整理的html怎么改变一块区域颜色,更改HTML中所选区域的背景颜色/不透明度的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 口袋觉醒魂匣多少钻石必须出 口袋妖怪系列
- 下一篇： 前端QRCode.js生成二维码插件