将鼠标悬停在图片上

Question

我正在Joomla建立一个网站。

在我的头版上，我有一些图像，这些图像是链接。

我希望这些图像能够获得略微绿色的效果，例如不透明度+绿色和stil下面的原始图像。

这可能只与css有关吗？

我可以使不透明度工作，但不是绿色。

希望有人可以帮助我。

Here is my site. it is the the small images under "Referencer" and "Nyheder"

Answer 1

这对CSS来说是可行的。主要技巧是链接当前不围绕img块，因为它们的显示类型是内联的。

假设以下HTML：

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

这是您需要的CSS：

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

显然，调整绿色和不透明度。

有关示例，请参阅此lovely jsfiddle。请注意，这包括添加CSS，以防您只是希望它在悬停时变为绿色。

Answer 2

您无法轻松使用纯CSS执行所需操作。 CSS中没有“叠加”。您可以操纵背景颜色/不透明度，但图像始终位于其上方，因此无法达到您想要的效果。

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