image - 将鼠标悬停在图像 a

Question

我正在 Joomla 中创建一个网站。

在我的首页上，我有一些图片，它们是链接。

我希望这些图像 a's 获得略带绿色的效果，例如不透明度 + 绿色，并且仍然具有下面的原始图像。

这可能只与css有关吗？

我可以使不透明度起作用，但不能使绿色起作用。

希望可以有人帮帮我。

score 1 · Accepted Answer

这可以通过 CSS 实现。主要技巧是链接当前没有围绕 img 块，因为它们的显示类型是内联的。

假设以下 HTML：

<a href="#" class="greenish"><img src="..." /></a>

这是您需要的 CSS：

a.greenish { 
    background: green;
    display: inline-block;
}
a.greenish img { 
    opacity: 0.5;
}

显然，根据口味调整绿色和不透明度。

例如，请参阅这个可爱的 jsfiddle。请注意，这包括添加 CSS，以防您只希望它在悬停时变为绿色。

score 0 · Accepted Answer

你将无法用纯 CSS 轻松地做你想做的事。CSS 中没有“覆盖”。您可以操纵背景颜色/不透明度，但图像将始终位于其之上，因此无法达到您想要的效果。

您需要做的是使图像成为 A 的背景，然后更改背景并使用已应用的效果制作类似的图像。这些图像很小，因此您可以轻松地将它们制作成同一张图像中的整体外观。我正是在公司网站顶部的社交图标上做到了这一点 - http://www.bnrbranding.com/

2 回答 2