如何添加標題的背景中IMG HTML

在畫面

是我的代碼和我拿什麼增加，使對background1.jpg「蘭蘭的晚餐」說明了什麼？這段代碼就是教科書中關於如何在標題下添加背景圖片的說法。但在此代碼中，只有圖片顯示，標題不顯示。謝謝

來源

2017-06-29 lanlan

https://stackoverflow.com/help/how-to-ask – epascarello

請閱讀本書...也閱讀此https://stackoverflow.com/help/how-to-ask線索：「alt屬性指定一個圖像** alt ** ernate文本」 – NewToJS

我們不喜歡代碼的照片，我們就像問題中的代碼一樣。 – epascarello

-1

你在alt屬性中的內容是一個替代文本。顯示圖像是否未加載（尚未或完全不加載）。它也被搜索引擎用來「理解」圖像中的內容。

如果你想你的頁面上顯示的文字，你必須把文本您h1標記內：

<h1><img src="image.jpg">your title</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>

來源

2017-06-29 01:18:28 Gael

這將使「您的標題」顯示在圖像下方。 – Amadan

-1

如果要在html中的圖片上顯示標題，您必須執行以下操作：<img src="images/background1.jpg" alt="Lanlan's Dinner" title="Lanlan's Dinner" width="700" height="700" />。 ALT屬性用於顯示未顯示圖像時的值。

最佳， thanhnt

來源

2017-06-29 01:23:08 thanhnt

您的標題不會像那樣顯示。 – Gael

感謝您的回答，但它仍然沒有顯示... – lanlan

要具有圖像作爲背景，使用background-image CSS屬性（或background屬性）。請注意相關的background-*屬性，其中許多屬性對於排列圖像很有用（例如，我在下面使用background-repeat，因此它不會平鋪該元素）。

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

<h1> 
 
    Hello, world 
 
</h1>

來源

2017-06-29 01:30:04 Amadan

這樣的背景圖像不應該完整顯示。 – Gael

感謝您的回答，但圖像無法完整顯示.... – lanlan

你可以這樣這樣的事情。按照建議將標題放置在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>

來源

2017-06-29 01:49:53

感謝您的回答。我試過你的代碼，圖片只顯示一小部分。 – lanlan

我會嘗試使用「寬度」和「高度」屬性來調整標題類的寬度和高度，以更好地匹配您的圖像大小。 –

如果我們用什麼後續的代碼？

<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>

來源

2017-06-29 06:33:30 TripleDeal

如何添加標題的背景中IMG HTML

回答

相關問題