帶有背景圖像的CSS Div - 如何允許在頁面上擴展div？

我不確定如何說出這個話題的問題......抱歉。帶有背景圖像的CSS Div - 如何允許在頁面上擴展div？

我剛剛開始學習CSS。

我有一個<div>與背景圖像，並有<div>內的文本。我讀到em選擇字體大小是一個不錯的選擇，因爲有些人在瀏覽器中可能需要更大的文本大小。所以用em設置字體大小可以更好地適應這些類型的用戶。

但是，允許文本大小調整的問題在於，在很多情況下，我的<div>中的文本將超出背景圖像的大小，並使頁面看起來很糟糕，設計也很糟糕。

有沒有辦法使用CSS，並允許背景圖像「匹配」或「擴大」以適應較大的文本大小的方法嗎？

2011-06-02 katura

對於我的特殊情況，我才發現，如果我切片背景圖像成3幅獨立的圖像（上，中，下），然後將它們設置爲3點獨立div的背景（對比1 div與1背景），我可以把內容放入中間div，'that'div然後'擴大'以適應更大的文本。注意：字體大小可以是「px」，以留出設計師的大小 - 或「px」來容納用戶。它適用於兩種方式。 – katura 2011-06-02 20:58:02

您可以在div的width設置爲imgwidth，使其永遠不會擴展更廣泛的（超出圖像）。

當然，放大的文本將迫使div增長高度明智。

您也可以設置background-img重複（如果圖像允許），以便當文本展開時，圖像重複。

background-image:url('whatever.png'); 
background-repeat:repeat-x; 

// x = horizontal, y = vertical

來源

2011-06-02 17:24:51

你給了我一個想法，我試了一下......我只是不得不將我的圖片分成3片，然後使用3格而不是1格。文本內容放在中間div和背景中 - 重複它允許div「增長」以適應內容。 – katura 2011-06-02 20:59:55

@katura很好的解決方案！很高興它的工作。 – 2011-06-02 22:51:33

既然你開始了，你可能需要閱讀http://na.isobar.com/standards/#_pixels_vs_ems其中，他們說：

我們使用測量的PX裝置來定義字體大小，因爲它提供了文本的絕對控制權。我們認識到使用em單元進行字體大小調整曾經很流行，以適應 Internet Explorer 6不調整基於像素的文本。然而，所有主要的瀏覽器（包括IE7和IE8）現在的都支持像素單元和/或整頁縮放的文本大小調整。由於IE6很大程度上被認爲是不合適的，因此首選像素尺寸爲。此外，無單位行高是首選，因爲它不會繼承其父元素的百分比值，而是基於字體大小的乘數。

正確：

#selector { 
    font-size: 13px; 
    line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */ 
}

錯誤：

/* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */ 
#selector { 
    font-size: 0.813em; 
    line-height: 1.25em; 
}

來源

2011-06-02 17:14:37

謝謝你提供的信息...我很感激。那麼，如果我使用'px'而不是'em'，我明白我可以更好地控制文本大小（它正在被修復），並且我可以通過縮放功能。因此，我不必關心在div中我的背景圖像邊界以外的文字。這一切聽起來不錯嗎？我只是想確定我正在學習正確的方法... – katura 2011-06-02 17:32:39

這聽起來不錯。你可以在[http://jsFiddle.net]測試它，並證明你的具體需求的方式或其他。 – 2011-06-02 17:42:04

我可能是錯的，但我認爲使用像素（仍然）的問題在於 - 儘管可以通過調整瀏覽器控件來調整它們的大小 - 但仍然會迫使訪問者對使用頁面進行調整。如果你用'em'或者'％'設置'font'，瀏覽器將會訪問訪問者的設置並應用它們。但是'px'按照開發人員的需要進行渲染......讓訪問者手動進行更改。 – 2011-06-02 19:50:57

帶有背景圖像的CSS Div - 如何允許在頁面上擴展div？

回答

相關問題