HTML/CSS - 如何爲整個表格創建一個背景圖片

-2

編輯：好吧原來是瀏覽器問題。希望有人可以在我得到更多的反對票之前關閉它 -HTML/CSS - 如何爲整個表格創建一個背景圖片

我想要一張深色的圖像作爲我桌子的背景，字體和邊框線條是淺色的，比如白色。這是我的HTML

<table> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 
    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 

    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 

    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 
    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 
    </tr> 
</table>

，這裏是我的CSS

table { 
    background:url(../images/bgimage.jpg); 
    background-repeat:no-repeat; 
    background-position:center center; 
    width:180px; 
    height:200px; 
    border:1px solid black; 
    width:180px; 
    height:200px; 
    }

但是，這是行不通的，它不設置任何圖像在屏幕上。怎麼來的？我甚至試過把！重要的盡頭，像這樣

background:url(../images/15387_isopropyl_alcohol.jpg) !important;

，但我仍然有nothnig難道這就是工作嗎？如果是的話，那麼我想我會再次通過我的整個代碼，看看是否有什麼錯誤。是否有另一種方式來放置在桌子後面的背景圖像？我想把桌子放在一個div裏，然後給這個div一個背景圖片，然後讓這個位置成爲絕對的，但這也不起作用，因爲這個圖片再次出現了某種原因。

來源

2013-10-10 user2719875

錯誤的圖像路徑？其他CSS干擾？ –

它適用於我，很可能你的背景網址有錯誤的路徑。 [Fiddle]（http://jsfiddle.net/zfB9n/） –

檢查瀏覽器的檢查器，看看發生了什麼（可能是特定性問題或不正確的路徑）。 – cimmanon

試着把你的桌子放在<div>裏面，然後在<div>上設置背景。

UPDATE：

的div建議只是爲了獲得一個快速解決，但是這一切都取決於你的形象引用是否連工作也什麼你試圖做的，爲什麼你甚至使用背景圖片首先。

你最終不得不強制執行表是大小的圖像相同或重複的圖像（這可能是也可能不是你想要的），或使用background-size: contain;縮放圖像以適應<div>內部或使用background-size: cover;要將圖像縮放至<div>的大小，這些最後2只能在更現代的瀏覽器中使用。

這個小提琴示例將表格固定在指定的寬度和高度之內。您仍然可以將背景圖像應用到表格，這是一個包裝<div>的示例，因此如果需要，您還可以將其他元素放在背景的前面。

http://jsfiddle.net/wbPpa/6/

HTML：

<div class="theme"> 
<table class="theme-table"> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 
    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 

    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 

    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 
    </tr> 
    <tr> 
     <td>blank</td> 
     <td>blank</td> 
    </tr> 
</table> 
</div>

CSS：

.theme-table, .theme { 
    height: 200px; 
    width: 180px; 
} 

.theme-table { 
    border:1px solid black; 
    table-layout: fixed; 

} 

.theme { 
    background:url(http://placehold.it/180x200); 
    background-repeat:no-repeat; 
}

來源

2013-10-10 18:42:04 Pricey

這是一個間接的答案，但仍然是問題的解決方案（也是我的第一個想法）+1 – user1477388

爲什麼這會很重要？ –

當我這樣做時，他的圖像出現在桌子旁邊。然後，我將圖像位置設置爲絕對，然後桌子覆蓋整個圖像。有任何解決這個問題的方法嗎？ – user2719875

的圖像可能是工作，但躲在桌子後面。嘗試將td不透明度設置爲0.9，以查看是否顯示背景圖像。

td { 
    opacity: 0.9; 
}

來源

2015-11-29 15:58:04 Mandy

HTML/CSS - 如何爲整個表格創建一個背景圖片

回答

相關問題