標題
這是一些示例文字。
How TO - 帶有透明文字的圖片
學習如何使用 CSS 建立帶有透明（透視）背景文字的圖片。
透明圖片文字
如何建立透明圖片文字
步驟 1) 新增 HTML
示例
<div class="container">
<img src="notebook.jpg" alt="筆記本" style="width:100%;">
<div class="content">
<h1>標題</h1>
<p>Lorem ipsum..</p>
</div>
</div>
步驟 2) 新增 CSS
示例
.container {
position: relative;
max-width: 800px; /* 最大寬度 */
margin: 0 auto; /* 將其居中 */
}
.container .content {
position: absolute; /* 定位背景文字 */
bottom: 0; /* 在底部。使用 top:0 將其附加到頂部 */
background: rgb(0, 0, 0); /* 後備顏色 */
background: rgba(0, 0, 0, 0.5); /* 黑色背景，0.5 透明度 */
color: #f1f1f1; /* 灰色文字 */
width: 100%; /* 寬度 100% */
padding: 20px; /* 一些內邊距 */
}
自己動手試一試 »
