如何 - 圖片上的文字塊
學習如何在圖片上放置文字塊。
圖片文字塊
如何在圖片中放置文字塊
步驟 1) 新增 HTML
示例
<div class="container">
<img src="nature.jpg" alt="挪威" style="width:100%;">
<div class="text-block">
<h4>自然</h4>
<p>多麼美麗的日出</p>
</div>
</div>
步驟 2) 新增 CSS
示例
/* 包含圖片和文字的容器 */
.container {
position: relative;
}
/* 右下角文字 */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
自己動手試一試 »
要了解有關如何設定影像樣式的更多資訊，請閱讀我們的 CSS 影像教程。
要了解更多關於 CSS 定位的資訊，請閱讀我們的 CSS 定位 教程。
