CSS不透明度和背景颜色

Question

我用我的链接的图像下面的CSS代码：

a img:hover { 
    filter: alpha(opacity=80); 
    -khtml-opacity: 0.8; 
    -moz-opacity: 0.8; 
    opacity: 0.8; 
    background: #f00; 
} 

的想法是，当用户将鼠标悬停在图片，这将稍微是红色。虽然浏览器似乎忽略了“背景：＃f00;”属性。

我在做什么错？

在此先感谢

Answer 1

它将无法正常工作，您有图像，所以你需要有一个覆盖元件，大概一个div

Demo

HTML

<div class="wrap"> 
    <img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" /> 
    <div class="overlay"></div> 
</div> 

CSS

.wrap { 
    position: relative; 
    display: inline-block; 
} 

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    top: 0; 
} 

.wrap:hover .overlay { 
    background: rgba(250, 0, 0, .1); 
} 

注意：您应该有一个定位的相对容器，否则绝对定位的div将在野外跑完，此外，您可以删除display: inline-block;并向容器元素提供相应的高度和宽度，请参阅它粘贴到您的图像，或者你也可以使用过渡平滑效果

对于过渡需要修改类这样

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    top: 0; 
    transition: background 1s; 
    -moz-transition: background 1s; 
    -webkit-transition: background 1s; 
    -o-transition: background 1s; 
} 

Demo Transition