图像上的文字叠加不起作用

Question

我有一张图片，我正试图覆盖其中的文字，但它会将文字推到图片下方而不显示它。不知道为什么这不起作用。任何帮助，将不胜感激。

这是我的代码：

<div class="product-hero-container">
<div class="product-hero">
<img src="./images/image.jpg" alt="Title">
<div class="product-hero-text">
<h1>Title</h1>
<h2>Sub title</h2>
<p>Description</p>
</div>
</div>
</div>

这是我的 css:

.product-hero-container {
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background: #fff;
}

.product-hero-container img {
display: block;
}

.product-hero {
position: relative;
width: 100%;
height: 100%;
}

.product-hero-text {
position: absolute;
overflow: hidden;
padding: 12px;
font-family:'Roboto', arial, sans-serif;
color:#FFF;
}

Answer 1

在您的绝对定位元素中设置 z-index: 1;。

Answer 2

似乎您需要对 .product-hero-text class 的左、上、右 and/or 底部声明，以便将其放置到位。

.product-hero-text {
position: absolute;
overflow: hidden;
left: 0; /* for example */
top: 0; /* for example */
padding: 12px;
font-family:'Roboto', arial, sans-serif;
color:#FFF;
}

图像上的文字叠加不起作用

Text overlay on image not working

html

css

text

overlay