どのように絵で

Question

が私のコードでHTMLで背景IMGにタイトルを追加するには、私はbackground1.jpgの「LANLANのディナー」のショーを作るために何を追加しなければなら？このコードは、あなたのタイトルの下に背景を追加する方法について教科書が言っているものです。しかし、このコードでは、画像だけが表示され、タイトルは表示されません。 ありがとう

Answer 1

altの属性には、の代替というテキストが入ります。画像がロードされていない（まだない、または全くロードされていない）場合に表示されます。また、検索エンジンは画像内の内容を「理解する」ためにも使用されます。その後、

<h1><img src="image.jpg">your title</h1> 

、あなたが好きなことを表示するために、いくつかのスタイルを適用します：

あなたのページ上のテキストを表示したい場合は、あなたがあなたのh1マークアップ内でそのテキストを配置する必要があり

h1{ 
 
    position:relative; 
 
} 
 

 
h1 .title{ 
 
    position: absolute; 
 

 
/*set that values to position your title, you can also use right and bottom, regarding on how you want to place your title */ 
 
    left: 0; 
 
    top:0; 
 
}

<br/> 
 
<br/> 
 
<br/> 
 
<h1> 
 
    <img src="https://via.placeholder.com/200x50"/> 
 
    <span class="title">your title</span> 
 
</h1>

Answer 2

画像のタイトルをhtmlにしたい場合は、何かをする必要があります：<img src="images/background1.jpg" alt="Lanlan's Dinner" title="Lanlan's Dinner" width="700" height="700" />。 ALT属性は、イメージが表示されていないときに値を表示するために使用されます。

ベスト、 thanhnt

Answer 3

background-image CSSプロパティ（またはbackgroundプロパティ）を使用し、背景としてイメージを持っています。関連するbackground-*のプロパティに注意してください。その多くは画像を配置するのに便利です（例：background-repeatを使用しているため、要素をタイルしません）。

h1 { 
 
    background: url(http://via.placeholder.com/200x50) no-repeat; 
 
}

<h1> 
 
    Hello, world 
 
</h1>

Answer 4

あなたことができるように、このような何か。 divの内側に見出しを置き、divの背景を推奨するイメージに設定します。次に、見出しの位置を相対的なものに設定し、イメージ上のテキストの配置を調整する機能があります。

私はこれがあなたが望んだと思いますか？このためにjsは本当に必要ありません。我々は次のコードを使用している場合は何

.header { 
 
    background: url(http://via.placeholder.com/200x50) no-repeat; 
 
    font-size: 14px; 
 
    width: 200px; 
 
    height: 50px; 
 
    
 
} 
 
.header h1 { 
 
    position: relative; 
 
    top: 20px; 
 
    left: 2px; 
 
}

<div class="header"> 
 
    <h1> 
 
    Hello, world 
 
    </h1> 
 
</div>

Answer 5

？

<figure> 
 
    <img 
 
    src="http://via.placeholder.com/200x50" 
 
    alt="An awesome picture"> \t 
 
    <figcaption>Text below the image.</figcaption> 
 
</figure>

<figcaption>状況のこれらのタイプのrecommendedあるので、あなたはそれを利用する必要があります。

編集;質問はタイトルの上に背景画像を追加する方法を、だったので、ここにあなたがそれを行う方法は次のとおりです。

<figure> 
 
     <figcaption>Text above the image.</figcaption> 
 
     <img 
 
     src="http://via.placeholder.com/200x50" 
 
     alt="An awesome picture"> \t 
 
</figure>