html - :hover background with img inside

Question

当我将鼠标悬停在链接的图像上时，我会在图像下方看到悬停背景色。如何避免这种情况？

是否有任何解决方案不涉及将特殊类应用于 a 元素(如 a.nobackground:hover)？

CSS:

a:hover, a:focus {
    background-color: rgb(240,39,96);
    cursor: pointer;    
}

HTML:

<a href="#" title=""><img src="with_transparency.png" alt=""/></a>

编辑:将 img 背景设置为无不起作用

a img {
    background: none !important;
}

如果图像下方没有非纯色(或图形)(在本例中为 .png)，则将 img 背景设置为任何其他颜色即可完成工作

a img {
    background: #000 !important;
}

Answer 1

设置图像的背景颜色是否符合您的要求？

a img {
    background: none;
}

根据您的样式表，您可能需要在“none”前面添加 !important 以覆盖其他条件。

编辑:再三考虑，您可能想要明确设置颜色值而不是简单地说“无”。

另一个编辑:是的，如果透明 PNG 后面的颜色或背景不是纯色，您会遇到一些问题。一种替代方法是:

<a href="#" class="transparent_png"></a>

还有 CSS:

.transparent_png {
    background-image: url('with_transparency.png');
    background-color: transparent;
    display: inline-block;
    width: ??px;
    height: ??px;
}

所以在这里，您实际上并没有使用图像标签，但可以覆盖通常应用于 a:hover 和 a:active 的背景颜色属性。这行得通吗？