顯示文本框居中在一個傾斜的矩形

Question

如何將集中的文本框放在下面的圖像中的每個彩色框內？

更新：根據要求，我加入了我的尷尬嘗試。我知道這很糟糕，但我不做設計，所以我有點迷路。

p.s.感謝您的反對票！

http://jsfiddle.net/Zrhe3/

table{width: 585px; height: 585px; background-image: url('http://i.stack.imgur.com/uknk9.png');} 
input{background-color: transparent; width: 100%; border-style:none; font-size: 32px;} 

<table> 
    <tr> 
     <td></td> 
     <td valign="bottom" align="center"><input type="number" id="number" value="1" /></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td align="right"><input type="number" id="number" value="2" /></td> 
     <td></td> 
     <td align="left"><input type="number" id="number" value="3" /></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td valign="top" align="center"><input type="number" id="number" value="4" /></td> 
     <td></td> 
    </tr> 
</table>​ 

Answer 1

你可以找到在這裏http://jsfiddle.net/ZC2bd/46/一個解決方案，但我敢肯定你沒有看過足夠;）谷歌是你的朋友

HTML：

<div id="background"> 
    <input id="top" type="text" /> 
    <input id="left" type="text" /> 
    <input id="right" type="text" /> 
    <input id="bottom" type="text" /> 
</div> 

CSS：

div#background{ 
    display: block; 
    width: 597px; 
    height: 597px; 
    background-image: url('http://i.stack.imgur.com/uknk9.png'); 
} 
#top{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 135px 0 0 224px; 
} 
#left{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 290px 0 0 70px; 
} 
#right{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 290px 0 0 380px; 
} 
#bottom{ 
    width: 150px; 
    height: 25px; 
    position: absolute; 
    margin: 435px 0 0 230px; 
}​ 

關於HTML部分它非常明確，有一個容器包含四個輸入。

在CSS文件中，我已將您的圖像設置爲具有固定寬度和高度的容器的背景。 然後，我爲輸入創建了四個ID，其中屬性position設置爲absolute。

絕對屬性允許您設置一個元素的位置作爲參考父元素，這裏是<div id="background">。 因此，既然您知道它的大小，您可以使用margin專案來定位您的元素。

希望它有幫助。