図の上に字幕形式でテキストを表示する場合が多く発生します。 このように画像の上にテキストを配置（オーバーレイ）させるには、外部 div要素에 相対 属性を適用して、内部のテキスト部分の要素には、 絶対の 属性を適用させるとされます。
[CSS]テキストオーバーレイ
たとえば、次の CSS コードを使用できます。
CSS 例：
.outer {position：relative; background：url（/images/css_textoverimage.jpg）; 幅：500ピクセル。 //幅設定height：309px; //高さ設定} .bottomleft {position：absolute; bottom: 0; left: 0.5em; 幅：400ピクセル。 font-weight: bold; color：＃fff; } .topright {position: absolute; top：1em; right: 2em; 幅：120ピクセル。 padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px; }
HTML 例：
（画像の左下に表示） （画像の右上に表示） // Source: the-art-of-web.com
top, 右, 左 などの値を調整して、好きなところにテキストを画像内に表示することができます。
参考までに Newspaper, Avada などの WordPress テーマでは、個々の投稿またはページのタイトルヘッダー部分に属性画像または特定の画像を背景として表示できます。
コメントを残す