Q

HTML/JSP顯示自定義重複背景圖像表

2015-05-01 42 views 0 likes

0

我試圖用這個模板練習：HTML/JSP顯示自定義重複背景圖像表

enter image description here

我用表格來顯示這些書，但我不知道如何顯示此空書架圖像作爲背景：

enter image description here

我試着用TD和TR，但沒有用;我也試過這樣：

#main-table{ 
margin: 0 auto; 
width : 1000px; 
background-image: url('images/EmptyWoodenShelf.png'); 
}

這裏是結果：

enter image description here

那麼，有沒有辦法，讓後大約100像素的背景重複？

UPDATE：這裏是我的CSS我設定TR背景圖片：

#main-table{ 
    margin: 0 auto; 
    width : 1000px; 
} 
#main-table tr{ 
    background-image: url('images/EmptyWoodenShelf.png'); 
    background-position: 0px 100px; 
} 
.tableitem{ 
    background-image: url('images/BookCover.png'); 
    background-position:center; 
    width:156px; 
    height:232px; 
    margin: 50px 15px; 
}

enter image description here

2015-05-01 Tung Cao

+0

最簡單的解決方案可能是隻作背景圖像100px的高透明的背景下，在頂部貨架。 – Quintile

+1

嘗試'background-position：100px 0px;'..其中第一個值代表水平位置，第二個代表垂直位置。 – Lal

+0

爲什麼不嘗試將背景圖像設置爲「」？ – Lal

A

回答

0

你必須在空白像素構建到您的書架圖形，這樣的整個高度圖形是100px。

雖然我會建議您將背景圖像添加到TR，並將其放置在底部。這樣你可以直接使用你的圖形。

2015-05-01 17:29:37

0

檢查這個例子中，我使用一個段落，並給圖像邊界，你想

#borderimg2 { 
 
    border: 10px solid transparent; 
 
    padding: 15px; 
 
    -webkit-border-image: url(http://i.stack.imgur.com/bZ8Lk.png) 30 stretch; /* Safari 3.1-5 */ 
 
    -o-border-image:url(http://i.stack.imgur.com/bZ8Lk.png) 30 stretch; /* Opera 11-12.1 */ 
 
    border-image: url(http://i.stack.imgur.com/bZ8Lk.png) 30 stretch; 
 
}

<p id="borderimg2">Here, the middle sections of the image are stretched to create the border.</p>

2015-05-01 17:34:21

0

您應該使用

background-position: 100px 0px;

第一個值是水平位置，第二個值是垂直的。左上角爲0 0.單位可以是像素（0px 0px）或任何其他CSS單位。如果您只指定一個值，另一個值將爲50％。您可以混合使用％和持倉

查看更多有關它here

2015-05-01 17:34:57 Lal

相關問題