CSS を使用して画像上にテキストを正確に配置するにはどうすればよいですか?

CSS を使用した画像上へのテキストの配置

CSS で画像上にテキストを追加する場合、正確な配置を実現するのは困難な場合があります。画像上にテキストを効果的に配置するさまざまな方法を検討してみましょう。

この例では、テキスト要素にposition:Absoluteを使用しましたが、これは正しいアプローチです。ただし、配置には、top、left、width のプロパティを正確に設定することも必要です。

コード内:

.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}

問題は、h2 で width: 100% と left: 0 を使用することにあります。要素。これにより、テキストが画像の境界を越えて拡張されます。代わりに、幅を特定の px 値に設定し、画像の幅よりも小さくなるようにします。

画像上にテキストを配置するもう 1 つのオプションは、z-index と Position: ABS を使用することです。以下に例を示します。

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div>

z-index を使用すると、テキストを他の要素の上に配置できます。 top プロパティと left プロパティを注意深く設定することで、テキストが画像の中央に配置されるようにすることができます。

最後に、background-image を使用する場合は、html2pdf がこの機能をサポートしていることを確認してください。そうしないと、目的の出力が得られない可能性があります。

以上がCSS を使用して画像上にテキストを正確に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。