Javascript 有没有办法根据内部图像塑造img元素的边缘？

我有一些按钮，里面有一个图像元素，我正在使用CSS过滤器来反转，但是当我这样做时，它也会改变img元素的背景，因为边框是正方形的，它不适合图像的边缘。有没有一种方法可以解决这个问题，或者通过改变元素以适应图像，或者只使用CSS过滤器改变某些颜色？任何帮助都将不胜感激

之前：

之后：

如果可能的话，理想的结果是去掉那种奇怪的棕色

按钮HTML：

<button class="Word button"><img class="wordImg" src="./res/Word.png" srcset="./res/Word.svg" alt=""></button>

JS:

---

也许是这样的。使过滤器仅应用于图像本身

在您的JS中，我将反转应用于按钮本身，而不是图像

wordBtn.classList.toggle('inverted');

此外，如果您关心SVG支持，srcset需要位于与img标记分开的源标记中

另外，对于实际需要透明度的部分，您的图像是否具有透明部分

<style>
.wordImg 
{
    background-color: rgb(54, 75, 109);
}

.button 
{
    border: none;
    cursor: pointer;
}

.button.inverted img 
{    
    filter: invert(100%);
}
</style>

<!-- HTML -->
<button class="Word button">
<picture>
<source srcset="./res/Word.svg" type="image/svg+xml" />
<img class="wordImg" src="./res/Word.png" alt="" />
</picture>

</button>

.wordImg
{
背景色：rgb（54,75,109）；
}
按钮
{
边界：无；
光标：指针；
}
.按钮.反向img
{    
过滤器：倒置（100%）；
}

可能是这样的。使过滤器仅应用于图像本身

在您的JS中，我将反转应用于按钮本身，而不是图像

wordBtn.classList.toggle('inverted');

此外，如果您关心SVG支持，srcset需要位于与img标记分开的源标记中

另外，对于实际需要透明度的部分，您的图像是否具有透明部分

<style>
.wordImg 
{
    background-color: rgb(54, 75, 109);
}

.button 
{
    border: none;
    cursor: pointer;
}

.button.inverted img 
{    
    filter: invert(100%);
}
</style>

<!-- HTML -->
<button class="Word button">
<picture>
<source srcset="./res/Word.svg" type="image/svg+xml" />
<img class="wordImg" src="./res/Word.png" alt="" />
</picture>

</button>

.wordImg
{
背景色：rgb（54,75,109）；
}
按钮
{
边界：无；
光标：指针；
}
.按钮.反向img
{    
过滤器：倒置（100%）；
}

嗨，不幸的是，这不起作用。我仍然得到同样的结果，背景变成奇怪的棕色。你使用的图像是海军背景还是那部分是透明的？它是透明的。嗨，不幸的是，这不起作用。我仍然得到同样的结果，背景变成奇怪的棕色。你使用的图像是海军背景还是那部分是透明的？它是透明的。