将文字放在背景图片上

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;
 }