使用CSS按鈕浮動在圖片上 在網站設計中，使用按鈕可以為用戶提供更好的導航體驗。有時候，將按鈕設置在圖片上可以增加網站的美觀性和吸引力。在本文中，我們將介紹CSS如何使按鈕浮動在圖片上。 首先，在HTML中添加圖片和按鈕。我們將使用pre標簽以便在代碼中顯示。

<div class="image-with-button">
  <img src="picture.jpg" alt="A beautiful picture">
  <button>Click me!</button>
</div>

接下來，我們將使用CSS來定位按鈕在圖片上方。我們需要將img元素設置為相對定位，使其成為父元素的參考點。然后，將按鈕設置為絕對定位，并通過top和left屬性將其定位在相對于父元素的位置。

.image-with-button {
  position: relative;
}
.image-with-button button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

最后，我們將添加一些樣式來使按鈕更加吸引人，比如改變按鈕的背景色和加粗文本。

.image-with-button button {
  /*添加樣式*/
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

現在，我們已經成功地將按鈕浮動在圖片上。以下是完整的HTML和CSS代碼。 HTML代碼：

<div class="image-with-button">
  <img src="picture.jpg" alt="A beautiful picture">
  <button>Click me!</button>
</div>

CSS代碼：

.image-with-button {
  position: relative;
}
.image-with-button button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

在使用這個技巧時，請注意調整按鈕的位置以確保它在圖片上方浮動。同時，如果您需要使用不同的按鈕樣式，請根據需要調整CSS代碼。 總結 在本文中，我們介紹了如何使用CSS使按鈕浮動在圖片上方，以增強網站的設計美感和導航體驗。通過這個技巧，你可以在你的網站上添加更多的互動和吸引力。