1

一部のテキストの拡張可能な背景画像を作成しようとしています。border-image プロパティは、私が望むものとほとんど同じです。問題は、境界線が本当に必要ないことです。境界線がコンテンツの背景になることです (具体的には、固定解像度のエッジとストレッチ センターが好きです)。高さをゼロに設定すると、私が望む正確な背景が得られますが、残念ながらテキストは中央より下にドロップされます:

height: 0px;
display: inline-block;
font-size: 100pt;
border: 149px;
border-image: url('img.png') 149 149 stretch;

編集：Firefox用 border: solid 149px;

http://jsfiddle.net/RL798/

  1. テキストを元に戻す最も簡単な方法は何ですか?
  2. 幅に負のオフセットを追加して境界線の辺を入れる簡単な方法はありますか?

これは、負のパディングが完璧な解決策を提供すると私が信じている素晴らしい例です。

同じ結果を得るには他にも多くの方法があることは承知していますが (たとえば、標準の背景画像と両側に 2 つの要素)、小さくて単純なものを求めています。

4

1 に答える 1

1

line-height を使用できます。

http://jsfiddle.net/jonigiuro/RL798/4/

div {
    height: 0px;
    display: inline-block;
    font-size: 100pt;
    border: 149px;
    border-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Button_Icon_GreenBlue.svg/300px-Button_Icon_GreenBlue.svg.png') 149 149 stretch;
    line-height: 20px;
}
于 2013-09-04T12:04:37.247 に答える