如何使用 CSS 將文字置於圖像上方？

使用 CSS 將文字在圖片上居中

在本文中，我們將探索使用 CSS 將文字在圖片上居中的技術。

簡單解決方案

實作基本文字以影像為中心，採用以下步驟：

• 對文字元素使用position:absolute。
• 將 left 屬性設為 0，將 width 屬性設為 100%。
• 水平居中文本，邊距：0 auto.

範例：

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

.image {
   position: relative;
}

.text {
   position: absolute;
   left: 0;
   width: 100%;
   margin: 0 auto;
}

使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用🎜>使用z-Index

來確保文字出現在影像上，將 z-index 套用於值高於影像的文字元素z-索引。

範例：

<div>

#container {
    height: 400px;
    width: 400px;
    position: relative;
}

#image {
    position: absolute;
    left: 0;
    top: 0;
}

#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
}

以上是如何使用 CSS 將文字置於圖像上方？的詳細內容。更多資訊請關注PHP中文網其他相關文章！