带有透明文本的图像

---

了解如何使用 CSS 创建具有透明（透视）背景文本的图像。

---

透明图片文字

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.

亲自试一试 »

---

如何创建透明图片文字

步骤 1) 添加 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>

---

步骤 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%; /* 全宽 */
  padding: 20px; /* 一些填充 */
}
亲自试一试 »