如何创建：带透明文字的图像

学习如何使用 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; /* 一些内边距 */
}

亲自试一试