Question

我有这段代码：

HTML：

<section id= "main">
    <h1> Hello </h1>
</section>

CSS：

#main {
  background-image: url("http://www.fullhdwpp.com/wp-content/uploads/Railroad-Tracks-in-the-Autumn-2_www.FullHDWpp.com_.jpg?66e13c");  
  min-height: 600px;
}

问题：我的<h1>正在向下推动背景，或者我在该部分中放置的任何其他内容，或者如果我将字体设置得更大，它就会下降。我想要完成的是一个非常简单的任务，即将图像作为背景/标题，只是让它保持不动，但我无法实现这一目标的最简单方法是什么？任何帮助或解释将不胜感激。

Answer 1

正在发生的事情是"h1"将其父元素边缘化。这是本机默认设置，您可以通过将"h1"的边距设置为0来拒绝该操作：

h1 {
    margin: 0;
}

并可选择添加填充：

h1 {
    margin: 0;
    padding: 5px 5px;
}

Answer 2

<section id= "main">
    <h1> Hello </h1>
</section>

#main {
    background-image: url(image1.jpg) repeat-x 0px 50px; 
    background-position: 0px 50px;
    background-repeat: repeat-x;
}

h1{
    margin:0;
}

背景被推下来

2 个答案: