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 サイトの他の関連記事を参照してください。