标题
Lorem ipsum dolor sit amet, an his etiam torquatos.
如何 - 带透明文本的图像
了解如何使用 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%; /* 全宽 */
padding: 20px; /* 填充一些间距 */
}
自己试一试 »
