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