在網頁設計中，往往需要將一些文字放置在圖片上，這樣可以增加文字的視覺效果，讓網頁看起來更加美觀。在CSS中，我們可以通過一些技巧來實現在圖片上放置文字的效果。

.container {
position: relative;
}
.container img {
display: block;
width: 100%;
height: auto;
}
.container .text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
font-weight: bold;
}

上面這段代碼實現了將文字放置在圖片中心的效果。首先，我們將圖片所在的容器設置為相對定位（position: relative;），然后設定圖片的樣式，使之可以自適應容器寬度，并等比例縮放高度。接著，我們再對要放置的文字設置絕對定位（position: absolute;），并使用了transform屬性來水平垂直居中（top: 50%; left: 50%; transform: translate(-50%, -50%);）。最后，我們對文字進行了一些顏色、字體大小和加粗的樣式設定。

除此之外，還有一些其他的技巧可以將文字放置在圖片上，例如在圖片上添加半透明遮罩，或者使用 CSS 概念中的 ::before 和 ::after 偽元素。通過這些技巧，我們可以在頁面設計中更加靈活地使用文字和圖片，提升用戶體驗。