在網(wǎng)站中，經(jīng)常會遇到需要在圖片上顯示按鈕的需求，在css中可以很方便地實現(xiàn)該功能。

.btn {
position: relative;
/* 設(shè)置定位為相對定位 */
display: inline-block;
/* 設(shè)置為行內(nèi)塊元素 */
overflow: hidden;
/* 隱藏溢出的內(nèi)容 */
}
.btn:hover .overlay {
opacity: 0.7;
/* 當(dāng)鼠標懸停在按鈕上時，顯示半透明遮罩層 */
}
.btn .overlay {
position: absolute;
/* 設(shè)置定位為絕對定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('button.png') no-repeat center center;
/* 設(shè)置遮罩層的背景為按鈕圖片 */
transition: all 0.5s;
/* 添加動畫效果 */
}

上述代碼中，我們創(chuàng)建了一個class為btn的元素，并將其定位為相對定位，同時設(shè)置為行內(nèi)塊元素，使其可以在圖片上顯示。通過設(shè)置overflow: hidden，我們隱藏了溢出的內(nèi)容。

在btn元素中，我們添加了一個class為overlay的元素，將其設(shè)置為絕對定位，并設(shè)置其上下左右均為0，使其覆蓋整個元素。同時，我們將其背景設(shè)置為按鈕圖片，并添加了一個透明度為0.7的半透明遮罩層，使其看起來更加的美觀。

最后，我們通過設(shè)置.btn:hover .overlay的樣式，使當(dāng)鼠標懸停在按鈕上時，遮罩層的透明度變?yōu)?.7，實現(xiàn)了一個簡單的按鈕效果。