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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

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

等等每个按钮/ div。

下面是一个例子

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div{  
    background-image: url('/wp-content/uploads/new2022/20220327voicc/62151154.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>

回答：

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

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

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

以上是 用真实图像制作计算器/图像 的全部内容， 来源链接： utcz.com/qa/263555.html

回到顶部