如何創建：帶透明文字的圖像

學習如何使用 CSS 創建帶有透明（半透明）背景文字的圖像。

透明圖像文本

Norway
Heading

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

親自試一試

如何創建透明圖像文本

第一步 - 添加 HTML：

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Heading</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

第二步 - 添加 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%; /* 全寬 */
  padding: 20px; /* 一些內邊距 */
}

親自試一試