1

左側にアイコン、右側にテキストを含む 3 つの 284x87 の角丸長方形ボックスを作成する最善の方法を見つけようとしています。純粋に CSS でこれをやってのける価値はありますか、それとも画像の使用から抜け出す方法はありませんか? 画像全体の背景画像を使用して、これまでに持っているものは次のとおりです。

<style type="text/css">
.blurect {
    background-image: url(blurect1.gif);
    width: 284px;
    height: 87px;
    color: #FFF;
    }
</style>
<div class="blurect">Test</div>
4

1 に答える 1

2

もちろんCSSも使えます。cale_b が言ったように、背景画像を適切な位置に設定してから、テキストがアイコンと重ならないように左パディングを調整します。適切な CSS は次のとおりです。

​.rect {
  background: url(path/to/image.png) 4px center no-repeat;
  padding: 4px 4px 4px 24px;
  width: 200px;
  height: 20px;
  line-height: 20px;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
}​

4px centerbackgroundルールでは、画像を左端から 4px に設定し、垂直方向の中央に配置します。左パディングは 24px に設定され、テキストを背景アイコンから離します。

ここにデモがあります： http://jsfiddle.net/6p8Rz/

寸法は明らかにニーズに合わせて調整可能です

于 2012-06-25T14:31:02.423 に答える