有没有一种方法可以根据img元素内部的图像来塑造其边缘？
提问于 2020-11-07 13:15:51
我有一些按钮，里面有一个图像元素，我正在使用CSS过滤器进行反转，但当我这样做时，它也会更改img元素的背景，因为边框是正方形的，它不适合图像的边缘。有没有办法解决这个问题，要么改变元素以适合图像，要么只用CSS滤镜改变某些颜色？任何帮助都将不胜感激。
之前：Before
之后：After
如果可能的话，我们想要的结果是去掉那奇怪的棕色。
按钮HTML：
<button class="Word button"><img class="wordImg" src="./res/Word.png" srcset="./res/Word.svg" alt=""></button>CSS：
.wordImg {
background-color: rgb(54, 75, 109);
}
.button {
border: none;
cursor: pointer;
}
.inverted {
filter: invert(100%);
}JS：
const wordBtn = document.querySelector('.Word');
const wordImg = document.querySelector('.wordImg');
wordBtn.addEventListener('click', (event) => {
desktop = `${homePath}/Desktop`;
console.log(desktop);
wordImg.classList.toggle('inverted');
});
回答 1
Stack Overflow用户
发布于 2020-11-07 13:32:12
也许是这样的。使滤镜仅应用于图像本身。
在JS中，我将反转应用于按钮本身，而不是图像。
wordBtn.classList.toggle('inverted');此外，如果您关心SVG支持，srcset需要位于独立于img标记的source标记中。
另外，你的图片中是否有需要透明的部分的透明部分？
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64728056
复制
腾讯云开发者
