如何在圖像上放置文本？

Question

我正在嘗試在圖像上放置一些文本並將其居中。 我環顧四周，看到的代碼對我不起作用。 誰能幫我弄清楚出了什么問題？

 .image img { width: 100%; height: 300px; position: relative; padding: 15px 5px 10px 5px; } .image h1 { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: 800; color: black; text-transform: uppercase; transform: 50%; font-size: 2rem; position: absolute; } .image p { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-weight: 400; color: black; text-transform: uppercase; position: absolute; top: 50%; left: 50%; font-size: 1rem; }

 <div class="image"> <img src="grass.jpg"></img> <h1>Big Cats Lawn Service </h1> <p>Let the big cat tame your jungle</p> </div>

抱歉，如果這是一個愚蠢的問題，我正在嘗試自學。 我在 Mac OS Mojave 上使用 Visual Studio Code 和實時服務器，如果這有什么不同的話。

Answer 1

HTML :

<div class="container">
  <img src="image.jpg" alt="image">
  <div class="center">center</div>
</div>

CSS :

.container {
  position: relative;
  text-align: center;
  color: white;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

資料來源： W3schools 。

Answer 2

您可以使用z-index屬性來確保您的文本始終位於圖像上方

您可以使用text-align將文本居中

代碼：

.image h1 {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: 800;
color: black;
text-transform: uppercase;
transform: 50%;
font-size: 2rem;
position: absolute;
z-index:100;
text-align:center;
}

.image p {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 400;
    color: black;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    z-index:100;
    text-align:center;

    }