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

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

Answer 1

h1下需要背景图片，所以需要像这样在.Paragraph类中定义background-image 。 这个好用，试试。

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

Answer 2

如果我理解正确，您需要在h1上设置背景，而不是所有内容。 在这种情况下，您可以将背景附加到h1的底部。 显然，为那个“边界”获得更好质量的图像会更好。

 body { background: #cccccc } .Title { margin: 75px; } h1 { background-image: url(https://i.stack.imgur.com/mdcx0.png); background-repeat: no-repeat; font-family: "Open sans", sans Cambria; font-size: 37px; background-position: left bottom; padding-bottom: 35px; background-size: 54% auto; margin-bottom: 0; } p { font-family: "Open sans", sans Cambria; font-size: 24px; } .Paragraph { margin-top: 25px; }

 <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>