2017-08-28 54 views
-3

enter image description here如何使按钮组与背景中的图像对齐?

有人提出使用WiX的是样机,但我已经尝试了很多使用的引导,才能使按钮看起来像实物模型的东西。背景图像是单个图像,没有分割。

+0

欢迎来到StackOverflow!为了让我们更好地为您提供帮助,能否请您更新您的问题,以便在[**最小,完整和可验证的示例**]中显示**相关代码**(http://stackoverflow.com/帮助/麦克风)在问题本身。如果您能让我们知道您迄今为止已经尝试解决您的问题,也会有所帮助。有关详细信息,请参阅有关[**如何提出良好问题**](http://stackoverflow.com/help/how-to-ask)的帮助文章,并参加该网站的[**游览**](http://stackoverflow.com/tour):) –

回答

1

使用下面的代码,希望这代码有帮助

<!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> 
0

如果你想要的按钮在那里的形象,你这样做:
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
<button style='margin-left: ***px;'>
我希望这回答了你的问题