Css 将位置与内联块元素组合以将文本悬停在图像上

我正在尝试编写一个仅限于CSS的全屏网格，这是我迄今为止的代码：

仅CSS全屏网格
正文{页边距：0；}
.电网{
线高：0；
}
.电网img{
宽度：20%！重要；
高度：自动！重要；
垂直对齐：顶部；
位置：相对位置；
}
.电网h2{
位置：绝对位置；
排名：0；
左：0；
}

我对我的代码很满意，直到我尝试在图片顶部添加文本。。。设置图像的相对位置和标题的绝对位置实际上会将

h2

堆叠在屏幕的左上角，正如我希望在每个图像的顶部放置

h2

。

我认为这可以工作：（未经测试）。不是最好的，但是如果你有相对位置的父div，里面任何绝对位置的东西都可以很容易地定位。。我认为它在您的系统中不起作用的原因是h2（具有绝对位置的div）没有被包装在具有相对位置的div中

   <div class="grid">
            <?php
            for ($i = 1; $i <= 20; $i++) {
                $hex = str_pad(dechex(mt_rand(0, 0xffffff)), 6, '0', STR_PAD_LEFT);
                $hex2 = str_pad(dechex(mt_rand(0, 0xffffff)), 6, '0', STR_PAD_LEFT);
    echo "<div style=\"position:relative\">";            
    echo "<img src=\"http://placehold.it/640x480/" . $hex . "/" . $hex2 . "/\">";
                echo "<div style=\"position:absolute\"><h2>Hello, World</h2></div>";
            }
            ?>
          </div>
   </div>

---

您需要根据需要设置h2的位置

这就是我解决问题的方法。我用div把它们叠起来了

这是我使用的html：

<div class="grid">
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/925e14/325111/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/0524f3/ea01a8/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/f688c8/ac9644/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/9b7093/27948e/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/78e101/2d96ab/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/0b959c/b9a02f/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/c7cea9/18c3a6/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/684c16/dcccdf/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/47352f/be1834/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/b8f72a/fa074f/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/13ccdf/9c765d/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/71d393/15b698/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/e080dd/a126a5/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/dbf7be/9264d4/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/3b2f96/dea622/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/0cfab0/4b2fd8/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/d27c64/1f4964/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/8f1726/43b8ee/" />
    </div>
    <div>
         <h2>Hello, World</h2>

        <img src="http://placehold.it/640x480/12421f/db44c1/" />
    </div>
</div>

你可以在这里看到：

这只会在调整窗口大小时拉伸div和图像。或者，如果您不希望在增加浏览器窗口时增加更多div，则必须修改.grid>div，如下所示：

.grid > div {
    width: 200px;
    display:inline-block;
}

这看起来非常好，因为图像是根据浏览器窗口的宽度堆叠起来的

请看这里：

---

希望这有帮助

您需要将每个图像和关联的h2包装在一个单独的div中，该div具有position:relative

CSS

body {
    margin: 0;
    padding:0;
}
.grid {
    line-height: 0;
    width:100%;
    font-size: 0; /* removes whitespace */

}
.grid img {
    max-width: 100%;
    height: auto;


}
.grid h2 {
    text-align: center;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-size:1rem; /* rest font-size */
}
.grid > div {
    width: 20%;
    display:inline-block;
    position: relative;
}

.grid > div img {
    display: block;

---

}

如果保存链接，它将返回一个空白JS FIDDLE，这将非常有帮助！修改。您需要将每个图像和关联的h2包装在一个单独的div中，该div具有

位置：relative

。不幸的是，这看起来是一样的：@Paulie\u D您的想法是正确的，尽管它需要一些小的调整和调整：）您不能将元素放入图像中。只是不起作用。它们不在图像中，它们在div中，具有包裹图像的相对位置…我建议你这样说——“我认为它在你的图像中不起作用的原因是h2没有包裹在img中…”

.grid > div {
    width: 200px;
    display:inline-block;
}

body {
    margin: 0;
    padding:0;
}
.grid {
    line-height: 0;
    width:100%;
    font-size: 0; /* removes whitespace */

}
.grid img {
    max-width: 100%;
    height: auto;


}
.grid h2 {
    text-align: center;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    font-size:1rem; /* rest font-size */
}
.grid > div {
    width: 20%;
    display:inline-block;
    position: relative;
}

.grid > div img {
    display: block;