HTML新手！ 背景圖像問題

Question

我正在學習HTML，我想通過重新創建電子博覽會發送給我的發票進行練習。

但是，我使用了background-image屬性，並通過repeat-x對其進行了重復，現在，背景在頁面上的伸展程度如此之大，以至於需要拖動水平條。

http://htmlpocketreference.11​​0mb.com/index.html

您可以在上面的鏈接中看到我的操作。

另外，我非常感謝您提供一些有關簡化CSS編碼的建議。 看起來確實很亂，一旦發生變化，我必須移動每個元素。 -.-

謝謝！

Answer 1

這是因為您具有相對定位的元素，但沒有固定的寬度-這些元素采用其父元素的寬度（即發票的寬度），並伸出頁面，從而導致溢出。 給他們一個背景色，您可以很清楚地看到：

為元素提供固定的寬度以解決此問題，或者使用其他布局元素的方法，例如浮動它們。

---

除此問題外，您還重復了id屬性，這將創建無效的HTML。 您應該考慮將class屬性用於具有相同樣式的多個元素，甚至更好的方法是考慮使用繼承和級聯，而不必為每個元素都指定一個id 。

進一步閱讀：

• CSS定位101
• Web標准課程的繼承與層疊

Answer 2

問題不是背景。 問題是您要賦予塊級元素的相對位置而不定義其寬度...

h2元素，例如（Ship To :)和（Phone）以及所有段落元素。 您需要為這些元素指定一個特定的寬度，它將正常工作

嘗試為這些元素設置背景色：黃色； 看看文檔內部的流程（出於調試目的），您將明白我的意思