Question

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

（问题只是关于界面。确切地说，问题是如何授权按钮和显示）

Answer 1

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

否则你必须计算点击的x，y位置才能知道点击了哪个按钮。

更好的是，如果你只用css设置按钮的样式。对于计算器来说，根据设计的不同，它应该非常难。

Answer 2

您可以使用背景位置属性并仅使用一个图像。

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

每个按钮/ div的

等等。

这是一个例子

＆＃13;

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

＆＃13;

制作计算器与真实的图像/图像

2 个答案: