时间戳

首页 > 解决方案 > 将 h1 从背景图像移到单独的行上

html - 将 h1 从背景图像移到单独的行上

问题描述

我有h1一个图像在我div的一个。目前，图像是一个背景，h1上面写着。是否可以将两个元素保持在一个中div（不仅仅是向上移动）和图像作为背景，但移动h1高于背景图像，使其在自己的线上？divh1

我想达到的结果：
我想达到的结果

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

标签： htmlcss

解决方案

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

因此，如果您执行以下操作：

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

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

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

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

推荐阅读