"position：absolute"を使わずに画像にテキストをつける方法は？

-3

画像にテキストを表示する唯一の方法はありますか？ポジション：絶対; トップ：0; （0または画像がどこにあるか）"position：absolute"を使わずに画像にテキストをつける方法は？

これを達成する他の方法はありますか？

2017-12-06 Khushbu Vaghela

ポジションはあなたが試したもののコードをポストする必要があり – Jonny

を表示するために取得したテキストとは何の関係もありません。これに対してポジションアブソリュートを使用すると何が問題になりますか？これを行う別の方法は、テキストを含む要素に背景イメージを追加することです。 – toast

htmlレイアウトによっては、他にもオプションがあります。コメントでトーストが言ったように背景画像を使用してください。負のマージンを使用することもできます。この例のように：

.myimage{ 
 
    background:red; 
 
    display:block; 
 
    margin-bottom: -50px; 
 
} 
 
    
 
.mytext{ 
 
    color:white; 
 
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red block" width="100" height="100" class="myimage" /> 
 
<div class="mytext"> 
 
[SOME TEXT] 
 
</div>

出典

2017-12-06 05:47:13 signal2013

"position：absolute"を使わずに画像にテキストをつける方法は？

答えて

関連する問題