ホームページ >ウェブフロントエンド >CSSチュートリアル >HTMLとCSSを使用して画像にテキストを追加するにはどうすればよいですか? (コード例)
この記事ではHTMLとCSSを使って画像に文字を追加する方法を紹介します。
早速、本題に入りましょう ~
1. HTML と CSS を使用して
を表現する利点は、「書く」ことではありません。 「画像自体にテキストを組み込む」も同様ですが、「HTML と CSS を使用して画像にテキストを設定する」には次のような利点があります。 (おすすめチュートリアル:CSS動画チュートリアル)
拡大しても文字が滲まない
検索エンジンにも読まれる(SEOに最適)
文字が選べます
レスポンシブデザインなのでフォントサイズの調整が可能です(スマホの表示で小文字にするなどもできます…)
2画像にテキストを配置する方法
ステップ 1: 画像を準備する必要があります
例として、暗い背景に白いテキストを配置したいと考えています。
ステップ 2: 画像と文字を div 要素に配置します
画像と文字を div タグの中に配置します。この例では、p タグに「万里の長城」というテキストを配置します。もちろん、p タグの代わりに title タグを使用したり、span タグを使用したりすることもできます。
<div class = "example" > <img src="image/greatwall.jpg" alt="HTMLとCSSを使用して画像にテキストを追加するにはどうすればよいですか? (コード例)" > <p>万里长城</p> </div>
ステップ 3: 位置属性を指定する
各要素に CSS 位置属性を設定します。
親要素のdivにはposition:relativeを指定し、文字列を含むpタグにはabsoluteを設定します。 imgタグは動きません。
p タグの位置を top:0; left:0 に設定します。
画像を横向きに配置するには、imgタグの幅をwidth:100%に指定してください。
.example{/*父元素div*/ position: relative;/*相対定位*/ } .example p { position: absolute;/*絶対定位*/ color: white;/*文字设为白色*/ top: 0; left: 0; } .example img { width: 100%; }
効果は次のとおりです:
テキストが画像の左上隅に表示されます。 Position:absolute 親要素は、親要素に対する相対的な位置を決定します。 top:0; left:0 は、「画像が親 (div) の左上隅に配置される」ことを意味します。
ステップ 4: テキスト スタイルを調整する
次に、フォント スタイルを調整して、フォントを拡大して太字にしてみます。また、見栄えを良くするためにフォントの種類も変更します。
.example{ position: relative; } .example p{ position: absolute; color: white; top: 0; left: 0; font-family :楷体,sans-serif; font-weight: bold; font-size: 2em; } .example img{width: 100%;}
効果は次のとおりです:
これで完了です。説明してください: 画像のサイズを特定のピクセルに固定したい場合は、次のようにします。幅に従ってください: 100% の場合、親要素の div の幅は固定ピクセルとして指定されます。
3. テキストを画像の中央に配置する
場合によっては、「画像の中央にテキストを配置」したい場合があります。この場合、CSS コードは次のようになります。
.example{ position: relative; } .example p{ position: absolute; color: white; /* top: 0; left: 0;*/ font-family :楷体,sans-serif; font-weight: bold; font-size: 2em; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; } .example img{width: 100%;}
効果は次のとおりです:
上記の中央揃えについて説明しましょう
上と左は 50 です%
これは基本的に中央に配置されます。ただし、これはテキストのサイズとは異なります。
テキスト部分の調整中にエラーが発生しました
transform:translate を使用してテキストの差異を修正します。翻訳(-50%,-50%)では、縦書きと横書きの違いを補正します。 ttransformはCS3の属性ですが、IE8以外のブラウザにも対応しています。
古いブラウザに対応するために、翻訳にはベンダー プレフィックス (-ms および -wabkit-) も付けられます。
magin とpadding を追加してもまだスペースがある場合は、中心からずれている可能性があります。したがって、念のため値を 0 に変更しましょう。
4. 画像に背景色付きでカテゴリ名を表示する
画像上に背景色付きで文字を表示する方法を紹介します。
次の CSS コードを見てください。HTML は上記と同じです。
.example { position: relative; } .example p { position: absolute; top: 0; left: 0; margin: 0; color: white; background: lightblue; font-size: 15px; line-height: 1; padding: 5px 10px; } .example img { width: 100%; }
効果は次のとおりです:
ラベルは画像の隅に貼り付けられ、文字は固定されます。この場合、画像の明るさに関係なく、はっきりと見ることができます。同様に、画像のサイズを変更したい場合は、親要素のdivにwidthを指定することをお勧めします。
以上がHTMLとCSSを使用して画像にテキストを追加するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。