CSS中，我們可以使用相對定位（relative positioning）和***定位（absolute positioning）將按鈕放置在圖片上。

我們需要創(chuàng)建一個(gè)包含按鈕和圖片的HTML結(jié)構(gòu)，這個(gè)結(jié)構(gòu)通常包括一個(gè)包含圖片的div，以及一個(gè)包含按鈕的div。

<div class="image-container">
    <img src="image.jpg" alt="Image">
    <div class="button-container">
        <button>Click me!</button>
    </div>
</div>

在CSS中，我們可以使用相對定位將按鈕放置在圖片上的某個(gè)位置，如果我們想要將按鈕放置在圖片的右下角，可以使用以下CSS代碼：

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
}
.button-container {
    position: absolute;
    bottom: 0;
    right: 0;
}

在這個(gè)例子中，.image-container被設(shè)置為相對定位，這意味著它可以包含***定位的元素。.button-container被設(shè)置為***定位，并且被放置在.image-container的右下角。

我們還可以使用CSS的偽元素（pseudo-elements）來創(chuàng)建一個(gè)按鈕在圖片上的效果，我們可以使用:after偽元素在圖片上創(chuàng)建一個(gè)按鈕的樣式：

.image-container {
    position: relative;
    width: 300px;
    height: 200px;
}
.image-container:after {
    content: "Click me!";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f0f0f0;
    border: 1px solid #000;
    padding: 10px;
}

在這個(gè)例子中，我們使用:after偽元素創(chuàng)建了一個(gè)按鈕的樣式，并將其放置在圖片的中央，通過transform屬性，我們可以將按鈕***地定位在圖片上的某個(gè)位置。