尝试在示例图像上放置绿色叠加层和标题

Question

我试图同时使图像具有绿色的覆盖层和图像本身内部的标题，同时尝试同时进行全部响应，我已经尝试了所有方法，但无法使其正常工作。

.headline-picture{
	height: auto;
	width: 100%;
	background-image: 
		linear-gradient(
			rgba(10, 158, 0, 0.5),
			rgba(10, 158, 0, 0.5)
		);
}

<div class="article-headline">
		<img class="headline-picture" src="example image">
</div>	

Answer 1

我认为我了解要求...请查看以下代码段。这是您要找的东西吗？

我已将叠加层作为单独的元素放置，并且为position:absolute。

.article-headline {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headline-picture {
  height: auto;
  width: 100%;
}

.overlay {
  background-color: rgba(0, 128, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  width: 100%;
}

h1 {
  position: absolute;
}

<div class="article-headline">
  <img class="headline-picture" src="https://placekitten.com/640/360">
  <div class="overlay"></div>
  <h1>Title</h1>
</div>