当我将鼠标悬停在链接的图像上时,我会看到悬停在图像下方的背景颜色。如何避免这种情况?
是否有任何解决方案不涉及将特殊类应用于 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 背景设置为 none 不起作用
a img {
background: none !important;
}
如果图像下方没有非纯色(或图形)(在本例中为 .png),则将 img 背景设置为任何其他颜色即可完成工作
a img {
background: #000 !important;
}
最佳答案
设置图像的背景颜色是否符合您的要求?
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 的背景颜色属性。这有效吗?
关于html - :hover background with img inside,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9363265/