圖片上的文字覆蓋不起作用

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類進行左，上，右和/或下聲明，以便將其放置到位。

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