html - 将 h1 移到与背景图像不同的行上

Question

我的一个 div 中有 h1 和一张图片。目前，图像是一个背景，上面写有 h1。是否可以将两个元素都放在一个 div 中(而不是将 h1 移到 div 之外)并将图像作为背景，但要移动 h1 高于背景图片所以它在自己的行上？

我想要达到的结果:

    <div class="header">
            <h1>Northside Youth Soccer League</h1>
            <img src="images/nysl_logo.png" alt="Company Logo">
    </div>

    .header {
    background-image:url("../images/design2_image1.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    height: 300px; 
    position: relative;   


    h1{
    color: #000000;
    font: 40px/60px "Sans", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
    text-align:left;

Answer 1

您可以控制 position背景图片，例如将其从顶部向下推，使其显示在标题下方。

所以如果你这样做:

.header {
    background-position: 0 60px;
    height: 360px; /* Original height + 60px */
}

这会将您的背景放在左侧并从顶部向下 60 像素 - 因为这是您的标题行高。

这可能不是一个理想的解决方案，因为您的标题被锁定为明确的行数。 (在手机屏幕上会发生什么？)

此外，如果背景图片需要一定的高度，您必须将标题容器的高度增加 60 像素，因为您将背景图片向下移动了这么多。