html - 如何使用背景图像正确定位？

Question

我想为我的 h1 使用自定义下划线，我决定最好的方法是使用属性：background-image. 一切都很顺利，直到我需要将背景定位在我的h1（Ce e asta？）下方。

我可以围绕 X 轴移动图像，但是当我尝试围绕 Y 轴移动图像时，图像就会消失。

这是一个捕获

在互联网上搜索了答案，但无济于事。

<div class="Title">
  <h1>Ce e asta?</h1>
  <div class="Paragraph">
    <p>Dat fiind faptul că următoarele alegeri parlamentare (legislative) vor avea loc de abia în anul 2021, m-am decis sa creez acest site pentru a ne putea alimenta cu speranță. <br>Speranță pe care ne-o vom dărui unul altuia. Ea va fi transmisă prin intermediul
      umorului, pentru că el de obicei reprezintă un înveliș pentru mesajul serios și intenționat care se află de fapt în spate. </p>
  </div>
</div>

.Title {
  margin: 75px;
  background-image: url("Images/Artboard 1.png");
  background-size: 100%;
  background-position: -500px;
  background-repeat: no-repeat;
}

h1 {
  font-family: "Open sans", sans Cambria;
  font-size: 37px;
}

p {
  font-family: "Open sans", sans Cambria;
  font-size: 24px;
}

.Paragraph {
  margin-top: 25px;
}

标签： htmlcss

Answer 1

你需要h1下的背景图片，所以你需要像这样background-image在.Paragraph类中定义。这行得通，试试吧。

在 Codepen 中查看演示

.Title{
  margin: 75px;
}
.Paragraph {
  margin-top: 25px;
  background-image: url("https://image.shutterstock.com/image-photo/large-beautiful-drops-transparent-rain-260nw-668593321.jpg");
  background-size: 100%;

  background-repeat: no-repeat;
}
h1{
  font-family: "Open sans", sans Cambria;
  font-size: 37px;
}
p{
  font-family: "Open sans", sans Cambria;
  font-size: 24px;    
}