1

テキストを別のテキストの背景として使用したい。基本的に、CSS でテキストを背景として使用する方法はありますか? でdiv説明されているように、2 つの要素を適切なpositionとz-index設定で使用することにより、これは非常に簡単です。.

私の問題は、サイズは異なりますが、両方のテキストを揃えたいということです。背景テキストの方が大きく、前景テキストは背景テキストと垂直方向に揃えて、両方のテキストの垂直方向の中心が同じ位置になるようにします。

ピクセル単位で位置を手動で調整することでこれを実現できますが、個別に使用するフォントサイズごとにこれを行う必要があります。さらに、これがすべてのブラウザーで同じように機能することを確認することはできません。

これを行うためのより良い代替手段はありますか?

4

4 に答える 4

2

私はそれを使用してそれを得ました：

<div style="position: relative; font-size: 100pt; height: 100px;">
  <div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height: 0.4em;">
    B
  </div>
  Sample text
</div>

leftとプロパティを使用して、両方のテキストを揃えることができます。コンテナのline-heightを増やしても、それらの相対的な配置は同じままです。font-size

于 2012-11-30T11:52:14.303 に答える
0

垂直方向の位置合わせは、次のように実行できます。

.parent {
position:relative;
zoom:1;/*has layout for ie*/
}
.verticalcentered1, .verticalcentered2 {
position:absolute;
top:50%;
height:20px;
margin-top:-10px;/*half the height*/
}
.verticalcentered1 {z-index:1;}    
.verticalcentered2 {z-index:2;}

verticalcentered要素があなたのテキストである場合、それらは親の垂直方向の中央に配置され、あなたが探しているものであれば、互いの上になります。

于 2012-11-30T11:38:14.653 に答える
-1

私はあなたがこのように見えると思います：-デモ

HTML

<div id="container">
        <div id="background">Sample Some Text </div>
        B
</div>

CSS

#container {
    position: relative;
    font-size:70px;
    color:#00c7ff;
    z-index:-1; 
}

#background {
    left: 20px;
    position: absolute;
    right: 0;
    top: 25%;
    z-index: 10;
    color:black;
    font-size:20px;
}
于 2012-11-30T11:46:07.257 に答える
-2

もちろん、別の方法を使用できます-プレースホルダーテキスト

新しいテキストを入力するとテキストが自動的に削除され、デフォルトのテキストが削除されます

//テキストボックス

<input  type="text" defaultvalue="Name" value="Name" name="add_name" id="add_name">

//Javasript コード

//For the placeholder
    $('#add-category input[type=text]').focus(function() {

        if ($(this).val() == $(this).attr('defaultValue')) {
          $(this).val('');
        }
      });

      $('#add-category input[type=text]').blur(function() {

        if ($(this).val() == '') {
          $(this).val($(this).attr('defaultValue'));
        } 
    });

上記のオプションを試してください。

于 2012-11-30T11:27:08.003 に答える