代碼爲移動

Question

HTML/CSS一個複雜的菜單我有這樣的菜單圖像

我想它在純HTML代碼/用於遊戲我創建了PhoneGap的CSS應用。我可以在應用程序內使用此圖像，但菜單項文本必須是可編輯的。

所以我創建了一個空圖像作爲背景使用：

在Android中有很多的屏幕分辨率，迫使我用百分比而不是像素，所以首先我限制遊戲是僅在肖像模式下播放。

沙發我的方法是;

• 使用百分比值來定位元素。
• 使用上面的圖片（沒有文字）作爲背景，並將項目作爲跨度。

Check a live demo here。

但這並不準確;在一些設備上的文字失控的區域，它應該:(

下面是完整的遊戲窗口：

任何提示

Answer 1

你可以使用除CSS之外的其他任何東西來實現相當接近JPG的東西，但它會很棘手。另外，如果目標受衆只是移動用戶，那麼您不必擔心IE8及以下版本。如果沒有IE8及以下版本不支持的CSS3，那麼以純CSS做這件事是不可能的。

所以有CSS選項...那麼也可以是SVG選項。 SVG是矢量圖形，這意味着它們可以無限擴展，而不會出現在光柵圖形中看到的令人討厭的像素（如JPG）。也可以使用CSS來設置SVG的樣式......這意味着您可以通過修改某些CSS來更改懸停顏色或文本顏色。然後文本將被覆蓋在圖形的頂部。矢量圖形將允許您根據您的方向和屏幕大小向上或向下縮放圖像。

這與我所能得到的一樣好，因爲我必須和有限的時間一起工作。請注意，寬度，高度，角度等都可以調整，您的寬度可以根據百分比進行調整，以便更具動態性。

JSFiddle Demo

HTML：

<div class="container"> 
    <div class="button"> 

    </div> 
    <div class="button"> 

    </div> 
    <div class="button"> 

    </div> 
    <div class="button"> 

    </div> 
</div> 

CSS：

.container { 
    width: 500px; 
} 

.button { 
    position: relative; 
    width: 300px; 
    height: 40px; 
    margin: 10px auto 0 auto; 
    background: #b9aea2; 
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2); 
} 

.button:first-child:before { 
    content: ' '; 
    position: absolute; 
    z-index: -1; 
    width: 40px; 
    height: 0px; 
    top: 14px; 
    left: -20px; 
    margin: 0px 0px 0 0px; 
    border-top: 20px solid transparent; 
    border-left: 15px solid white; 
    border-bottom: 20px solid transparent; 
    -webkit-transform: skew(-5deg); 
     -moz-transform: skew(-5deg); 
     -o-transform: skew(-5deg); 
    background: #b9aea2; 
} 

.button:last-child:before { 
    content: ' '; 
    position: absolute; 
    z-index: -1; 
    width: 40px; 
    height: 0px; 
    top: 14px; 
    right: -20px; 
    margin: 0px 0px 0 0px; 
    border-top: 20px solid transparent; 
    border-right: 15px solid white; 
    border-bottom: 20px solid transparent; 
    -webkit-transform: skew(5deg); 
     -moz-transform: skew(5deg); 
     -o-transform: skew(5deg); 
    background: #b9aea2; 
} 

.button:after { 
    content: ' '; 
    position: absolute; 
    display: block; 
    width: 240px; 
    height: 10px; 
    bottom: -10px; 
    left: 30px; 
    -webkit-transform: skew(-80deg); 
     -moz-transform: skew(-80deg); 
     -o-transform: skew(-80deg); 
    background: #6b6562; 
} 

.button:last-child:after { 
    width: 0; 
    height: 0; 
    background: transparent; 
} 

Answer 2

幾件事情，可能會有幫助：？

在您的CSS中，查看.menu-game--container課程，如果您將background-size: center;更改爲background-size: contain;，則確保所有圖片確實在圖片中。有時，這不會很好恩。

如果你真的想確定你的文字會放在正確的位置，可以考慮使用photoshop或其他東西直接將文字放入圖像中，然後使用<map> tag作爲鏈接。

最後，我發現，如果您使用href="javascript:"而不是href="#"，然後將javascript放入OnClick事件中，它會更好。