流體佈局的CSS背景圖像

我想將背景圖像應用於li元素。流體佈局的CSS背景圖像

<ul> 
<li class="maintablink">&nbsp;</li> 
</ul>

我對相同的CSS是

li.maintablink{background:url(../images/tab_content.png) no-repeat left top;}

即使增加了一些寬度：200像素，高度：200像素以上不起作用。

我使用HTML5的doctype

我有2個與此相關的問題;

背景圖像稍大，並不完全顯示在裏面。即它間接依賴於我的元素裏面的內容。我不想在裏面提供任何內容（ 除外）如何解決此問題？我怎麼給這個背景圖像的寬度/高度...它應該與瀏覽器的大小（我知道的頁面圖像，我們使用img{max-width:100%}）...但是如何讓背景圖像具有可伸縮性？

來源

2011-10-11 testndtv

這聽起來像你正在尋找CSS background-size財產。

對於背景，根據容器的尺寸是可伸縮的：

background-size: auto;

對於背景是固定大小，而不管容器的尺寸或實際的背景圖像的：

background-size: 150px 200px;

您還可以使用百分比或關鍵字contain或cover。

有關更多信息，請參閱http://www.css3.info/preview/background-size/。

請注意，background-size現在確實有相當不錯的瀏覽器支持，但是一些較舊的瀏覽器（特別是IE8及更早版本，還包括Firefox 3.x）不支持它。

如果您需要完全支持這些瀏覽器，您需要制定一個回退解決方案（可能使用額外的標記和/或Modernizr來確定該功能是否可用）。

來源

2011-10-11 09:43:29 Spudley

THX很多......所以，當我們說的背景尺寸：汽車;它是否按照背景圖像自身的寬度/高度或者我們賦予該元素本身或賦予其元素的寬度/高度？ – testndtv

-1

應用背景圖像到li元素

李不是塊元件，所以你必須改變display:inline-block設置寬度和高度之前。

有設置背景大小CSS你可以按照這個link一個選項。如果你不希望顯示來自李元素內容只是把text-indent:-9999px你李 CSS。

看看這個demo測試background-size

來源

2011-10-11 09:55:18 kst

我只是嘗試添加顯示：inline-block; width：300px; height：300px; background：url（../ images/tab_content.png）no-repeat left top; background-size：auto;到我的元素CSS ...但仍然無法工作.. – testndtv

@testndtv我編輯了我的答案。 – kst

Thx ...在你的jsfiddle演示中，如果我刪除，固定的px寬度/高度，它不起作用...這就是我正在尋找...沒有px尺寸..只有相對像％尺寸。。 – testndtv

流體佈局的CSS背景圖像

回答

相關問題