用真实图像制作计算器/图像

-2

我想用真实图像制作一个计算器或其中更多的人使用html css和javascript。有没有关于如何做到这一点的建议？我应该使用诸如图像映射之类的东西，还是在Photoshop中剪切它，然后像拼图一样连接它？用真实图像制作计算器/图像

（现在的问题是只有大约接口。准确地说，问题是如何授权按钮和显示）

来源

2017-06-19 skaljic1

这个问题是不是太广，根据意见或需要讨论，所以是题外话堆栈溢出。如果您有特定的，可回答的编程问题，请提供完整的详细信息。 –

那么你可以使用background-position属性并只使用一个图像。

background-position:left top; 
background-position:center top; 
background-position:right top;

等等每个按钮/ div。

下面是一个例子

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div{ 
 
    background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); 
 
    width:100px; 
 
    height:100px; 
 
    background-repeat: no-repeat; 
 
    display:inline-block; 
 
} 
 

 
div#lt{ 
 
background-position: top left; 
 
} 
 

 
div#ct{ 
 
background-position: top center; 
 
} 
 

 
div#rt{ 
 
background-position: top right; 
 
} 
 

 
div#lc{ 
 
background-position: center left; 
 
} 
 

 
div#cc{ 
 
background-position: center center; 
 
} 
 

 
div#rc{ 
 
background-position: center right; 
 
} 
 

 
div#lb{ 
 
background-position:left bottom; 
 
} 
 

 
div#cb{ 
 
background-position: center bottom; 
 
} 
 

 
div#rb{ 
 
background-position: right bottom; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<div id="lt"></div> 
 
<div id="ct"></div> 
 
<div id="rt"></div> 
 
<br /> 
 
<div id="lc"></div> 
 
<div id="cc"></div> 
 
<div id="rc"></div> 
 
<br /> 
 
<div id="lb"></div> 
 
<div id="cb"></div> 
 
<div id="rb"></div> 
 
</body> 
 

 
</html>

来源

2017-06-19 13:25:40 Raj

这是最好立方米削减他们在Photoshop这样你就可以分别绑定每个图像上的JavaScript事件。

否则，您将不得不计算点击的x，y位置，以了解哪个按钮被点击。

更好的是，如果你可以风格的按钮只有css。对于计算器来说，它不应该很难，这取决于设计。

来源

2017-06-19 13:22:11

用真实图像制作计算器/图像

回答

相关问题