ゲスト- CSS の透明バック
ゲスト (Kobu)
0 users
CSSで、背景があって、その上に透明色を使って色をつけて、その上にリンク付きの文字を書きたいのですが、リンクがクリックできないのです。何かいい方法はないでしょうか。
見てもらったほうが、わかりやすいと思いますが
<html>
<body>
<style>
#test{
width:100px;
height:100px;
background-color:rgb(255,0,0);
z-index:2;
}
#test_2{
position:relative;
top:-20px;
width:50px;
filter: alpha(opacity=50);
opacity:0.5;
}
#test_3{
color:rgb(255,255,255);
height:100px;
background-color:rgb(0,0,255);
z-index:1;
}
#test_4{
z-index:1;
weight:100px;
}
</style>
<divid="test">
<divid="test_4">
<ahref="#">テスト</a>
</div>
<divid="test_2">
<divid="test_3">
</div>
</div>
</div>
</body>
</html>
まぁ、イメージとしてはこんな感じです。
これでテストがクリックできるようにしたいのですが・・。
Firefox2.0・IE7.0どちらもダメでした。
どなたかご教授よろしくお願いします。
コメント
- 2：SAI
- 2007/11/06 10:50
基本的にhtmlは、ソースの後ろに書いた方が重なりの順番的に上へなろうするので、
positionやmarginの負数（ネガティブマージン）で要素をずらしたりすると、意図しない重なり方をして「リンクが押せない」という状況に陥りがちです。
意図した結果が得られない場合は、焦らずに要素の重なり順を再確認してみるのが大事、と自分でも言い聞かせたりしていますｗ
元のソースの場合、単純に"#test_4"内の"a"に、
#test_4
とするだけで押せるようにはなります。
※意図した見た目かどうかは別として、で。
前へ 1 次へ
すいません、
チョコチョコといじっていたら解決しました。
<html>
<body>
<style>
.test{
}
.test_2{
}
.test_3{
}
.test_4{
}
</style>
<div
<div
<a
</div>
<div
<div
</div>
</div>
</div>
</body>
</html>