1

絶対配置されたテキストのビットを含む絶対配置された親があり、下にある画像に合わせて引き伸ばす必要があります。次のようになります。

<div class="text-layer">
    <pre class="text-item">    some text   </pre>
    <pre class="text-item">    some text   </pre>
    <pre class="text-item">    some text   </pre>
</div>

ページにテキスト項目を配置すると、テキストのスニペットの (正しい) 左の値が得られます。ただし、一部のテキストは、CSS transform プロパティを使用して引き伸ばす必要があります。

transform: scaleX(#)

div が引き伸ばされると、次の例のように視覚的に同じ左位置を維持しません。

1->     xxxxx
2->  xxxxxxxxxxx

以下のような効果が欲しいです。

1->     xxxxx
2->     xxxxxxxxxxx

修正以外に、'left' がこれを考慮しない理由が気になります。要素を 'left:0' に配置した場合、その要素がどのように大きくなっても、その 'left' エッジはそこにあり続けるべきではありませんか?

詳細については編集してください：

      .my-canvas {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        background-color: white;
        display: block;
      }

      .text-layer {
        color: transparent;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin-left: auto;
        margin-right: auto;
      }

テキスト項目の例は次のようになります。

<div class="text-item" 
     style="position: absolute; left: 80.5557355px; 
            top: 4.49999999999996px; font-size: 50px; 
            font-family: sans-serif; 
            transform: scaleX(2.58938106853314);">
     <span class="highlight">H</span>ELLO
</div>
4

1 に答える 1

4

を使用transform-origin:して、変換の原点を設定できます。

コードペンを作りました。ここにリンクがあり ます http://codepen.io/Prashantsani/pen/QjWdQV

于 2015-08-31T18:23:29.973 に答える