匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

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)が半透明化します。
方法があるようでしたら教えてください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2017/01/05 18:33:31
  • 終了:2017/01/12 18:35:03

回答(2件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2017/01/06 14:16:57

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

匿名質問者

ありがとうございます!
無事ロールオーバーでの画像入れ替えが出来ました!

2017/01/07 09:25:26
匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2017/01/07 00:22:56

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません