CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用して画像上にテキストブロックを配置するにはどうすればよいですか？

以下は、CSSを使用して画像上にテキストブロックを生成するコードです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imageContainer {
   display: inline-block;
   position: relative;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.captionBlock {
   position: absolute;
   bottom: 20px;
   right: 20px;
   background-color: rgb(14, 0, 94);
   color: rgb(255, 255, 255);
   padding-left: 20px;
   padding-right: 20px;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Image Text Block Example</h1>
<div class="imageContainer">
<img src="https://i.picsum.photos/id/59/500/500.jpg" alt="Nature" style="width:100%;">
<div class="captionBlock">
<h3>Scenary</h3>
<h4>Fence on the ground</h4>
</div>
</div>
</body>
</html>

出力

上記のコードは次の出力を生成します-

CSSを使用して画像上にテキストブロックを配置するにはどうすればよいですか？



  1. text-align＆text-justify CSSプロパティを使用してテキストを揃える方法は？

    CSS text-justify プロパティは、要素の位置合わせタイプを指定するのに役立ちます。 text-alignプロパティは、要素内のテキストの水平方向の配置を設定します。 例 次の例は、CSSのtext-justifyプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> article {    margin: 3%;    background-color: peachpuff;    text-align: justif

  2. C ++を使用してOpenCVの画像にテキストを配置するにはどうすればよいですか？

    OpenCVでは、puttext（）関数を使用して画像にテキストを入れることができます。この関数はで定義されています ヘッダ。画像にテキストを入れるには、まず画像を読み込むマトリックスを宣言する必要があります。 プログラムに画像をロードする代わりに、マトリックスを白色で塗りつぶしてから、そのマトリックスにテキストを配置します。マトリックス内のテキストの開始点、テキストのフォント、フォントの色、およびフォントの太さを定義する必要があります。 このメソッドの基本的な構文は次のとおりです- 構文 putText(image, "Text in Images", text_po