css リンクの背景画像を半透明にしたい。

ban_00.pngの画像を通常の状態と半透明の状態を上下で並べて一つのban_00.pngとして書き出します。(上下に2つ並んだ状態）

.ban_1には一つのボタンのwidthとheightを指定し、overflow:hiddenで指定された大きさ以外は見えないようにします。数値はサンプルですので適宜変更してください。
background-position: top left;で画像を左上基準で表示するように指定します。

.ban_1{
/* ↓↓↓追加↓↓↓ */
width:200px;
height:50px;
overflow:hidden;
background-position: top left;
/* ↑↑↑追加ここまで↑↑↑ */
background-image:url(ban_00.png);
background-repeat:no-repeat;
text-align:right;
}

a要素が親の大きさと同じになるようにされているようですので.ban_1:hoverとして親要素に以下のように指定します。
親要素がロールオーバーされたときに背景画像を左下基準で表示するようにします。

.ban_1:hover {
background-position: left bottom;
}

a要素はそのままでということですので.ban_1 a:hoverは削除します。
画像の移動は瞬間的に行われますので半透明したように見えます。
昔からよく使わる手法(今メジャーかどうかはわかりませんが)ですので「css　背景画像　移動」等で検索すると色々情報が出て来ると思いますよ。

「css background-image opacity」でググると分かる。