Question

我有h1和一张div中的图片。当前，图像是背景，上面写有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像素-因为这是您的标题行高度。

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

此外，如果背景图片需要一定的高度，则由于将背景图片向下移动了很多，因此您还必须在标题容器的高度上添加60px。

Answer 2

添加变换：translateY（-100％）;您的h1样式

<Socket name="Logstash" host="hostname" port="portnumber" protocol="UDP" immediateFlush="false" ignoreExceptions="true">
   <LogstashLayout dateTimeFormatPattern="yyyy-MM-dd'T'HH:mm:ss.SSSZZZ" eventTemplateUri="classpath:LogstashJsonEventLayoutV1.json"                 prettyPrintEnabled="true" stackTraceEnabled="true" />
</Socket>

将h1从背景图片移到另一行

2 个答案: