Question

＆＃13;

<html>
<head>
<title> Example </title>
<style>
img:hover {opacity : 0.3;}
img {z-index : 1;
height : 33%;
width : 33%;

}
.first { position : absolute;
 top: 0%;
 left: 0%;}
 .second {position : absolute;
 top: 0%;
 left: 33%;}
 .third {position : absolute;
 top: 0%;
 left: 66%;}
</style>
</head>
<body>
This text should remain behind 1st image on resizing the window.
<img class = "first" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "second" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "third" src = "http://www.dubcen.com/uploads/ex.jpg">

</body>
</html>

＆＃13;

如何仅将此文字保留在第一张图片后面？我尝试用div来解决问题，但无法实现任何具体的目标。

Answer 1

您可以为第一张图片添加position：absolute，并将所有内容放在3个单独的框中。比仅将文本输入第一个框。检查小提琴链接。

position: absolute;
top: 0;
left: 0;

这是一个可能的解决方案：https://jsfiddle.net/c4oz41nu/

如果这有助于你，请告诉我。

Answer 2

您的HTML和CSS一样错误。

你不应该像在你的例子中那样使用绝对位置。

以下是更新后的代码：

<强> HTML

<div class="imgHolder">
    <p>This text should remain behind 1st image on resizing the window.</p>
    <img src="http://www.dubcen.com/uploads/ex.jpg">
</div>
<div class="imgHolder"><img src="http://www.dubcen.com/uploads/ex.jpg"></div>
<div class="imgHolder"><img src="http://www.dubcen.com/uploads/ex.jpg"></div>

<强> CSS

 img:hover {opacity : 0.3}
.imgHolder{float:left;width:33%;white-space: normal;position:relative}
.imgHolder p{position:absolute;top:0;display:none}
.imgHolder:hover p{display:block}

它应该做的伎俩

Answer 3

使用此代码：

<!DOCTYPE html>
<html>
<head>
<title> Example </title>
<style>
img:hover {
    opacity : 0.3;
}
img {
    height : 33%;
    width : 33%;
}
.first {
    z-index: 1;
    position : fixed;
    top: 0%;
    left: 0%;}
 .second {
    z-index: 0;
    position : absolute;
    top: 0%;
    left: 33%;
 }
 .third {
    z-index: 0;
    position : absolute;
    top: 0%;
    left: 66%;
 }
 p{
    top: 0;
    left: 0;
    position: absolute;
    z-index: 0;
 }
</style>
</head>
<body>
<p class="text">This text should remain behind 1st image on resizing the window</p>
<img class = "first" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "second" src = "http://www.dubcen.com/uploads/ex.jpg">
<img class = "third" src = "http://www.dubcen.com/uploads/ex.jpg">
</body>
</html>

我为文本插入了<p>标记，然后给它一个0的z-index。然后除了第一个图像之外的每个图像的z索引也为0。第一个图像的z-index为1。 p标签绝对定位并始终位于第一张图像后面。即使在调整大小但不在第二或第三张图像后面。希望这会有所帮助：）

每当调整窗口大小时，如何将文本保留在第一个图像后面？

3 个答案: