更新

Question

<head>
<style type="text/css">
    img.bg {
      /* Set rules to fill background */
      min-height: 100%;
      min-width: 1024px;

      /* Set up proportionate scaling */
      width: 100%;
      height: auto;

      /* Set up positioning */
      position: fixed;
      top: 0;
      left: 0;

      z-index: 3;
    }

    @media screen and (max-width: 1024px) { /* Specific to this particular image */
      img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
      }
    }
</style>
    <title>
        Blah blah blah
    </title>
</head>

<body>
    <div>
        <img src="moto_e_card.jpg" class="bg" /> 
    <h1 style="z-index: 10;"> Hello World </h1>
    </div>
</body>

我想在div中有一个全屏背景图像，而这些div的顶部，我需要Text。以上是我的实施，我知道我遗漏了一些非常基本的东西，请帮忙。为什么我无法在图像上看到标题？提前感谢你的帮助。

更新

div的作用是包含一个填满窗口的图像，而div还包含图像顶部的文本。

Answer 1

虽然我不确定你打算将其实施为什么我会建议通过backround设置img：;

并考虑实施同一篇文章中列出的其他方法，您可以从中获得此代码。

http://css-tricks.com/perfect-full-page-background-image/

也读到： http://css-tricks.com/forums/topic/responsive-hero-image-with-text-overlay/

我建议在将它带到这个论坛之前做更多的研究。

:) - 你学习中最好的

Answer 2

我建议将图像设置为div的背景图像（而不是将图像标记添加到主HTML部分），并将背景大小设置为100％。如果不是这样，那么将你的img设置为-1的z-index，或者将你的标题包装在一个新的div中，这将把包含标题的div放在视图中，而不是放在图像后面。

关于图像和标题的简单HTML查询

更新

2 个答案: