2

これはあなたにとって簡単なはずです:)背景画像を繰り返す3つのボタンを作成しようとしています。私は 2 つと<button>リンクを使用します<a>。リンクでは機能しますが、ボタンでは機能しません。側面の画像 (角の丸い部分) は表示されません。html は次のとおりです。

<!doctype html>
<html>

<head>
    <title>Task 1</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
    <link rel="stylesheet" type="text/css" href="task1.css">
</head>

<body>
<button class="blue-btn"><span id="left">&nbsp;</span>OK<span id="right">&nbsp;</span></button><br/>
<button class="blue-btn"><span id="left">&nbsp;</span>Cancel<span id="right">&nbsp;</span></button><br/>
<a href="#" class="blue-btn"><span id="left">&nbsp;</span>View More Information<span id="right">&nbsp;</span></a>
</body>
</html>

CSSは次のとおりです。

.blue-btn{
    background: url('button-repeat.png') repeat-x;
    border:0;
    height:55px;
    font: 14px/44px Myriad-Pro, sans-serif;
    color:black;
    cursor:pointer;
}
a{
    display:inline-block;
    text-decoration:none;
}
#left{
    display:block;
    background: url('button-left.png') no-repeat;
    height:55px;
    width:24px;
    float:left;
    margin-left:-24px;
}
#right{
    display:block;
    background: url('button-right.png') no-repeat;
    height:55px;
    width:24px;
    float:right;
    margin-right:-24px;
}
4

3 に答える 3

2

私はあなたがそれをすることができないと確信しています。ボタンのように見えるように、の使用をあきらめて<button>、通常の要素 (おそらく<a>、<span>または) のスタイルを設定する必要があるかもしれません。<div>

于 2013-03-21T13:49:58.553 に答える
0

スパンを使用せずにボタンのスタイルを設定し、代わりに複数の背景画像と複数の位置を使用してみてください。

.button {
background-image: url(), url();
background-position: left top, right top;
}

※IE8、IE9には対応しておりませんのでご注意ください。

于 2013-03-21T14:02:37.893 に答える
0

位置魔法なら可能です。blue_btn を position:relative にし、左右の部分を position:absolute にします。また、スタイリングに ID を使用しないでください。意味のあるクラス名をボタン パーツに追加してください。

.blue-btn{
  position: relative;
}

.btn-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
}
.btn-left {      
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 10px;
}

ジャスフィドル

于 2013-03-21T14:17:14.247 に答える