Heading
Lorem ipsum dolor sit amet, an his etiam torquatos.
如何创建 - 带有透明文本的图像
了解如何使用 CSS 创建具有透明（透视）背景文本的图像。
透明图片文字
如何创建透明图片文字
步骤 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;
/* 一些填充 */
}
亲自试一试 »
