4

ボタンと部分的に重なる透明なPNGがあります。画像が重なる部分ではボタンが非アクティブになります。透明度を「オフ」にして、ボタンがその後ろでクリックできるようにする方法はありますか？または、この問題を解決する可能性のある他のトリックはありますか？

4

6 に答える 6

3

imgの透明度は、ボタンをクリックできるかどうかとは関係がないため、「透明度をオフにする」ことは何の役にも立ちません。

Mar_Garinaが指摘しているように、z-indexは、どの要素が他の要素の上/下にあるかを決定するものです。そのボタンを常に上に配置したい場合は、より高いz-indexを付けます。ただし、この画像はそのボタンと重なることに注意してください。これは、希望どおりでない場合があります。

カスタムボタンのスタイリングを探している場合は、css付きのボタン引き戸もチェックしてください

于 2010-06-18T17:02:25.987 に答える
1

一般的に言って、問題の解決策は確かにありません。ピクセルが透明であるかどうかに関係なく、画像領域は常に長方形です。

ただし、@ Chief17の回答から、ボタンがOSのレンダリングスタイルを使用しておらず、背景画像自体がない場合に機能する可能性があるという考えが得られました。

その場合、一般的なレイアウトの状況で許可されている場合は、ページ上に浮かんでいる画像に加えて、ボタンと重なるはずの画像をそのボタンの背景画像として設定できます。を使用background-positionすると、画像の位置を調整して、ボタンの表示領域をほぼ残し、ボタンがカバーしてはならない小さな重なり合う領域のみをカバーするようにする必要があります。

それは当然のことですか？ボタンのbackground-imageプロパティを使用してオーバーラップを偽造していますが、実際には、オーバーラップ領域はボタンの背景画像です。

これは、ボタンの位置やその他の要素を非常に厳密に制御できる場合にのみ機能します。それはあなたのためにうまくいかないかもしれません。

于 2010-06-18T19:42:26.437 に答える
0

代わりにこれを行うことができませんでした：

<style type="text/css">
#button
{
background-image: url("[image location]");
width: [image width];
width: [image height];
}
</style>

と

<input type="button" value="button" id="button"/>

これにより、ボタンがクリック可能になり、画像が上に表示されます。

于 2010-06-18T19:36:36.037 に答える
0

ボタンに高いz-indexを与えるかもしれませんか？

于 2010-06-18T16:58:22.013 に答える
0

ボタンのz-indexを高くして、透明な画像の上に表示します。

document.getElementById('buttonId').style.zIndex = -5
于 2010-06-18T16:59:52.010 に答える
0

私はお勧めしませんが、次のスタイルでアンカーを作成できます。

<a href="#" class="className">&nbsp;</a>

a.className {
  display: block;
  width: [width of button];
  height: [height of button];
  z-index: [above image];
}

ボタンの動作を模倣するには...

于 2010-06-18T19:25:06.920 に答える