人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

リンクの背景に画像を置いています。
ロールオーバー時、リンクが設定してある画像は半透明にすることなく、背景画像を半透明にすることは可能でしょうか?
<div class="ban_1"><a href="00.html"><img src="00.png"></div>
--
.ban_1{
background-image:url(ban_00.png);
background-repeat:no-repeat;
text-align:right;
}
.ban_1 a{
display:block;
width: 100%;
}
.ban_1 a:hover{
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
こうすると、背景は半透明化せず、上の画像(00.png)が半透明化します。
方法があるようでしたら教えてください。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● 匿名回答1号

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 背景画像 移動」等で検索すると色々情報が出て来ると思いますよ。


匿名質問者さんのコメント
ありがとうございます! 無事ロールオーバーでの画像入れ替えが出来ました!

2 ● 匿名回答2号

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ