2011-12-10 8 views
0

誰かがリンクを乗り越えると、リンクを表示(ホバー)するためにこのコードをオンラインにしました。私のホバーイメージが透明性を示さない原因は何ですか?

しかし、表示される画像(.png)は透明ですが、この画像は黒い背景に置き換えられます。このギャラリーのコードの外にイメージを置くと、透明度が正しく表示されるので、ギャラリーのCSSと関係があると仮定します。背景に関係するすべての機能を使いこなしましたが、私の.pngの透明度を置き換える黒い背景には影響しないようです。

皆さんは、何が原因なのか、それを修正する方法を見つけることができますか?ありがとう!

CSS:

<style type="text/css"> 

.gallerycontainer{ 
position: relative; 
/*Add a height attribute and set to largest image's height to prevent overlaying*/ 
} 

.thumbnail img{ 
border: 1px solid white; 
margin: 0 5px 5px 0; 
} 

.thumbnail:hover{ 
    background-color: transparent; 

} 


.thumbnail span{ /*CSS for enlarged image*/ 
position: absolute; 
background-color: transparent; 
padding: 5px; 
left: -1000px; 
visibility: hidden; 
color: black; /*this is for the text*/ 
text-decoration: none; 
} 

.thumbnail span img{ /*CSS for enlarged image*/ 
border-width: 0; 
padding: 2px; 
} 

.thumbnail:hover span{ /*CSS for enlarged image*/ 
visibility: visible; 
top: 0; 
left: 230px; /*position where enlarged image should offset horizontally */ 
z-index: 50; 
} 

</style> 

HTML:

<body> 
<div class="gallerycontainer"> 

<a class="thumbnail" href="#thumb"><p>Starck</p><span><img src="starck_transp_gun_silver.png" /><br />Text.</span></a> 


</div> 

</body> 
+1

どのブラウザをお使いですか? – haynar

+0

サファリとFirefox – okr

答えて

1

私の唯一の推測では、あなたが正しくあなたのイメージを固定していないということです。戻って、実際に透明な背景の.pngであることを確認してください。

関連する問題