不規則な形の画像にテキストを回り込ませることはできますか?

非長方形画像の周囲にテキストを折り返すことはできますか?

非長方形画像の周囲にテキストを折り返すことは、Web デザインにおける一般的な課題です。さまざまな国の地図があり、国境から一定の距離を保ちながら、テキストを国の形の周囲に回り込ませたい場合を考えてみましょう。これを実現することは可能ですか?

解決策

はい、Tory Lawson が 2011 年に概説した手法を使用して、非長方形の画像の周囲にテキストを折り返すことができます。ブログ投稿「非長方形の図形の周囲でテキストを折り返す」。この方法には、図形の領域をブロックする浮動 div が含まれます。

ステップ 1: 回り込み領域を定義する

• テキストと画像の境界線の間の適切な距離を決定します。
• 編集プログラムで画像を開き、グリッドをオーバーレイします。
• 描画パディング (例: 5px) を考慮した、テキストの終了位置を表す境界形状。

ステップ 2: 幅測定リストを作成する

• ラップ領域の幅を一定の間隔（例：10 ピクセルごと）で測定します。
• 記録これらの測定値を紙に記録します。

ステップ 3: Div を作成する

• 画像とテキストのラッパーとして機能する div を作成します。 .
• 幅ごとに追加の div を作成します

CSS

#wrapper { 
   width: [image width];
   height: [image height];
   display:block;
   background-image:url("[image path]");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

注: このアプローチは、CSS の「テキストラップ」を使用するほど単純ではありません。オプションですが、テキストの回り込み動作を正確に制御できます。

以上が不規則な形の画像にテキストを回り込ませることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。