将鼠标悬停在图片上

Question

我在Joomla制作一个网站。

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

我希望这些图像a可以获得略带绿色的效果，如不透明度+绿色和stil具有下面的原始图像。

这是可能做的只有CSS？

我可以得到工作的不透明度，但不是绿色。

希望有人能帮助我。

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

Answer 1

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

你需要做的是将图像作为A的背景，然后改变背景做一个与已经应用的效果相似的图像。图像很小，所以你可以很容易地使他们精灵与过度看在同一图像。我在我公司网站顶部的社交图标上做了这个 - http://www.bnrbranding.com/

Answer 2

这是可以用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，以防止您只希望它在盘旋时变为绿色。