計(jì)算器圖片在一些網(wǎng)站中是很常見的。在CSS中，我們可以使用背景圖片來實(shí)現(xiàn)這一效果。

.calculator {
width: 230px;
height: 270px;
background-image: url('calculator.png');
background-repeat: no-repeat;
background-size: cover;
}

上面的代碼中，我們創(chuàng)建了一個(gè)名為calculator的類，它的寬度為230像素，高度為270像素。我們使用了一個(gè)背景圖片calculator.png，并設(shè)置了背景不重復(fù)（background-repeat: no-repeat）并且填充整個(gè)元素（background-size: cover）。

接下來，我們需要在圖片上創(chuàng)建數(shù)字按鈕。我們可以使用position屬性對(duì)每個(gè)按鈕進(jìn)行絕對(duì)定位。

.one {
position: absolute;
top: 100px;
left: 30px;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.two {
position: absolute;
top: 100px;
left: 90px;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
text-align: center;
line-height: 50px;
}

上面的代碼中，我們創(chuàng)建了兩個(gè)按鈕：one和two。我們使用了相對(duì)于calculator元素的絕對(duì)定位。top和left屬性決定了按鈕在圖片上的位置。我們還設(shè)置了按鈕的寬度、高度、背景顏色、邊框半徑、文本對(duì)齊方式和行高。

最后，我們需要添加數(shù)字到按鈕上。我們可以使用偽元素來實(shí)現(xiàn)這一效果。

.one:before {
content: "1";
font-size: 20px;
}
.two:before {
content: "2";
font-size: 20px;
}

上面的代碼中，我們使用:before偽元素添加了數(shù)字1和2到按鈕上。我們還設(shè)置了字體大小。

通過這些CSS代碼，我們可以在網(wǎng)頁上創(chuàng)建一個(gè)漂亮的計(jì)算器圖片。