HTML/CSS：如何更改圖片不透明度？

我設法在使用CSS懸停時編寫圖像不透明效果，但該圖像充當我的頁面的按鈕，並且其上有文本。我想在文字懸停時更改圖像的不透明度，但我不知道該怎麼做。順便說一句，這是我的代碼：HTML/CSS：如何更改圖片不透明度？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Page Test</title> 

<style type="text/css"> 
<!-- 
body { 
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
background-image:url('img/back.jpg'); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:center; 
margin: 0; 
padding: 0; 
} 

a:link { 
color: #42413C; 
text-decoration: underline; 
} 
    a:visited { 
color: #6E6C64; 
text-decoration: underline; 
} 
a:hover, a:active, a:focus { 
text-decoration: none; 
} 
#apDiv1 { 
position:absolute; 
width:200px; 
height:115px; 
z-index:1; 
left: -70px; 
top: 277px; 
bottom: 0px; 
    } 
    #apDiv2 { 
position:absolute; 
width:835px; 
height:115px; 
z-index:1; 
left: 125px; 
top: 48px; 
color:#CCC; 
    } 
    .img { 
opacity:0.7; 

    } 
    .fntSz{ 
font-size:100px; 
} 
    .menu1 { 
opacity:0.7; 
    } 
    .menu1:hover{ 
opacity:0.5; 
    } 
    #apDiv3 { 
position:absolute; 
width:200px; 
height:69px; 
z-index:2; 
left: 39px; 
top: 4px; 
    } 
    .adDiv3:Hover{ 

    } 
    .menufnt{ 
color:#CCC; 
font-size:50px; 
    } 
    --> 
    </style></head> 

    <body> 
    <div id="apDiv3"><div class="menufnt">HOME</div></div> 
    <div id="apDiv1"><img src="img/layerback.jpg" width="1115" height="240"            class="img"/> 
    <div id="apDiv2"> 
    <div class="fntSz">NEW YORK CITY</div> 
    </div> 
    </div> 
    <img src="img/menu1.jpg" width="242" height="85" class = "menu1" /> 
    </body> 
    </html>

來源

2013-03-10 conquistador

我們可以看到這個活嗎？或者在[jsfiddle]（http://jsfiddle.net/）中？ – xpy 2013-03-10 11:39:05

您可以嘗試您的建議 – conquistador 2013-03-10 11:45:01