• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• rouge_20082013/03/14 20:44:37

  満足100pt

  HTMLのコードを記述している順番としては、Bの画像表示の後にAの画像表示、またはB、Aの順番で各要素に背景画像を指定しているのでしょうか？
  この場合、上に重ねる画像を「absolute」で配置していると思いますが、この要素に対して「z-index:5;」を指定してみてください。
  
  ※例えばHTMLが次のようになっている場合、
  
  ・画像をimgで表示

  <div class="ribbon-box">
  	<img class="ribbon-a" src="上に重ねる画像のパス">
  	<img class="ribbon-b" src="下に表示する画像のパス">
  </div>
  

  
  

  CSSは次のように指定します。
  

  <style type="text/css">
  	.ribbon-box {
  		position: relative;
  	}
  	.ribbon-b:hover {
  		opacity: 0.4;
  		filter: alpha(Opacity=40);
  	}
  	.ribbon-a{
  		position: absolute;
  		left: 45px;
  		top: 70px;
  		z-index: 5;
  	}
  </style>
  

  
  

  ・各要素の背景画像として表示
  

  <div class="msg-box">
  	<div class="img-a"><span>Ribbon-A</span></div>
  	<div class="img-b"><span>Ribbon-B</span></div>
  </div>
  
  

  
  

  CSSは次のように指定します。
  

  <style type="text/css">
  	.msg-box {
  		position: relative;
  		width: 400px;
  	}
  	.img-a {
  		position: absolute;
  		background: url(上に表示する画像のパス) 0px 5px no-repeat;
  		width: 110px;
  		height: 110px;
  		left: 40px;
  		top: 70px;
  		z-index:5;
  	}
  	.img-a span {
  		visibility: hidden;
  	}
  
  	.img-b:hover {
  		opacity: 0.4;
  		filter: alpha(Opacity=40);
  	}
  	.img-b {
  		background: url(下に表示する画像のパス) 0 0 no-repeat;
  		width: 110px;
  		height: 110px;
  	}
  	.img-b span {
  		visibility: hidden;
  	}
  </style>
  

  
  

  (※反映されない場合は、さらに大きな数値を指定して試してください。)
  
  http://www.htmq.com/style/z-index.shtml
  
  ※あるいは順番に記述すると大丈夫なので、Aの画像の後にBの画像を表示、またはA、Bの順番で要素に背景画像を指定しても大丈夫です。

  スター

その他の回答

この質問へのコメント

質問の情報

登録日時

2013-03-13 15:48:11

終了日時

2013-03-15 11:43:32

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者17時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者117時間前
• 内定してほしいポケモンはいますか？匿名質問者17時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ