标题
这是一些示例文本。
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; /* 一些内边距 */
}
自己动手试一试 »
