-1

これが私のボタンです：http://jsfiddle.net/cRqhT/120/

HTML:

<a id="button" href="http://example.com"</a>

CSS:

#button{
  display: block;
    width: 121px;
    height: 40px;
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/1.png) no-repeat top;
}
#button:hover {
    background: url(https://gator1174.hostgator.com/~mskparik/facebook/2.png) no-repeat bottom;
    }

背景はこちら: http://b.dryicons.com/files/graphics_previews/shining_background.jpg

左中央の背景の上にボタンを配置するにはどうすればよいですか?

4

1 に答える 1

1

アンカーから>が欠落しています：

<a id="button" href="http://mysite.com"></a>

1つの解決策は、アンカーをその背景とアンカーの絶対位置を持つコンテナーに配置することです。

<div>
    <a ... ></a>
</div>


.div { position:relative; background:transparent url('myUrl.png') no-repeat; }
a { position:absolute; top:XXpx; left:0; }

仕切りが背景画像と同じ高さと幅を持ち、XXpx画像の高さからアンカーの高さを引いたものを2で割ったものに等しい場合。

JSFiddleの例。

于 2013-02-22T15:15:50.853 に答える