如何使按鈕組與背景中的圖像對齊？

-3

enter image description here 如何使按鈕組與背景中的圖像對齊？

有人提出使用WiX的是樣機，但我已經嘗試了很多使用的引導，才能使按鈕看起來像實物模型的東西。背景圖像是單個圖像，沒有分割。

2017-08-28 Jacobo de la Rosa

歡迎來到StackOverflow！爲了讓我們更好地爲您提供幫助，能否請您更新您的問題，以便在[**最小，完整和可驗證的示例**]中顯示**相關代碼**（http://stackoverflow.com/幫助/麥克風）在問題本身。如果您能讓我們知道您迄今爲止已經嘗試解決您的問題，也會有所幫助。有關詳細信息，請參閱有關[**如何提出良好問題**]（http://stackoverflow.com/help/how-to-ask）的幫助文章，並參加該網站的[**遊覽**]（http://stackoverflow.com/tour）:) –

使用下面的代碼，希望這代碼有幫助

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<style type="text/css"> 
    body{ 
     margin: 0 auto; 
     padding: 0; 
     width: 100%; 
     max-width: 1280px; 
    } 
    .btn1,.btn2,.btn3,.btn4 { 
     color: black;   
     width: 80px; 
     height: 28px; 
     text-align: left; 
     position: absolute; 
     font-size: 12px; 
     cursor: pointer; 
     background-color: Transparent; 
     z-index: 1; 
     text-align: center; 
    }.btn1{ 
     top: 18%; 
     left: 27%; 
    }.btn2{ 
     top: 18%; 
     left: 41%; 
    }.btn3{ 
     top: 18%; 
     left: 54%; 
    }.btn4{ 
     top: 18%; 
     left: 66%; 
    } 
    img { 
     display: block; 
     left: 0; 
     position: absolute; 
     z-index: 1; 
    } 
</style> 
</head> 
<body> 
<img src="WD4yq.jpg" alt="title"/> 
<button class="btn1">Test1</button> 
<button class="btn2">Test2</button> 
<button class="btn3">Test3</button> 
<button class="btn4">Test4</button> 
</body> 
</html>

來源

2017-08-28 10:06:05

如果你想要的按鈕在那裏的形象，你這樣做：
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
我希望這回答了你的問題

來源

2017-08-28 09:34:07 MBJH

如何使按鈕組與背景中的圖像對齊？

回答

相關問題