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

【问题标题】：Making calculator with real image/images用真实图像/图像制作计算器
【发布时间】：2017-06-19 21:42:39
【问题描述】：

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

（问题只是界面的问题，准确的说是按钮和显示如何赋能）

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

【解决方案1】：

你可以使用 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>

【讨论】：

【解决方案2】：

最好在 Photoshop 中剪切它们，这样您就可以分别在每个图像上绑定 javascript 事件。

否则您必须计算单击的 x、y 位置才能知道单击了哪个按钮。

如果您可以仅使用 css 设置按钮样式，那就更好了。对于计算器来说，它应该不是很难，具体取决于设计。

【讨论】：