将文本放在背景图像上

Question

如何在背景图像上放置文本？

.hero {
	background-image: url("../img/photo.jpg");
}

<section class="hero">
		<div class="container">
			<p>Welcome to Parallels
Clean Responsive Parallax Theme</p>
		</div>
	</section>

Answer 1

<figure class="caption">
<img class="demo" src="https://i.imgur.com/rzReHL0.jpg" alt="Background" />
<figcaption class="caption-text">This is a caption text</figcaption>
</figure>

这是您要尝试执行的操作吗？ 这支笔应该可以完成这项工作 https://codepen.io/anon/pen/qMWaXo

.caption {
position: relative;
padding: 0;
margin: 0;
}
.caption img {
display: block;
max-width: 100%;
height: auto;
}
.caption:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 100%) repeat 0 0;
z-index: 1;
}
.caption-text {
display: block;
position: absolute;
box-sizing: border-box;
color: #f1f1f1;
width: 100%;
left: 0;
bottom: 0;
padding: 1em;
z-index: 5;
}