如何更改圖像僅一部分的亮度（html / css / js）？

Question

我有一個帶有標簽的圖像，這些標簽對應於圖像的不同部分。 例如，圖像可能是一條狗，而標簽之一是“鼻子”，它對應於圖像在狗鼻子周圍的部分。 當用戶將鼠標懸停在標簽上時，我希望圖像相應部分周圍的亮度增加。 我怎樣才能做到這一點？

 function fixLabel(c) { var x_coor = document.getElementById('x').textContent; var y_coor = document.getElementById('y').textContent; var x2_coor = document.getElementById('x2').textContent; var y2_coor = document.getElementById('y2').textContent; var width = document.getElementById('w').textContent; var height = document.getElementById('h').textContent; var tag = document.createElement('input'); // Create a `input` element, tag.setAttribute('type', 'text'); // Set it's `type` attribute, tag.setAttribute('name', 'loc:' + round_2_decimals(x_coor) + "-" + round_2_decimals(y_coor) + "-" + round_2_decimals(x2_coor) + "-" + round_2_decimals(y2_coor) + "-" + round_2_decimals(width) + "-" + round_2_decimals(height)); /** *Here's the area: How do I attach a mouseover function so the image's *brightness increases whenever I hover over the tag? */ tag.onmouseover = function() {}; var br = document.createElement('br'); // Create a `br` element, var button_div = document.getElementById('fix_label_area'); button_div.appendChild(br); button_div.appendChild(tag); button_div.appendChild(br); }; 

 <div> <p id='x'></p> <p id='y'></p> <p id='x2'></p> <p id='y2'></p> <p id='w'></p> <p id='h'></p> <br/> <button id='fix_label' onclick="fixLabel()">Fix Label Here</button> </div> <form action="" method="POST" id="canvas"> <div id='img_area'> <img src="someImageFile.jpg" id="imageId" width="350" height="350" /> </div> <div id='label_area'> <input type="submit" name="submit" value="Label" id='input'> </div> <div id='fix_label_area'></div> </form> 

Answer 1

就個人而言，Canvas和SVG更為強大，但是您可以使用CSS剪切一個圓圈，並使用不透明度使原始圖像變暗。 但是，您需要檢查瀏覽器支持 ，以確保它涵蓋了所需的瀏覽器。

 div.holder { position: relative; } img.main { opacity: .4; } img.circle { position: absolute; clip-path: circle(50px at 405px 135px); } 

 <div class="holder"> <img class="circle" src="https://placedog.net/500" /> <img class="main" src="https://placedog.net/500" /> </div>