Question

我在代码中添加了两个gif，并且尝试在其顶部添加文本，但最终却位于gif的顶部或底部。如何在gif之上添加一些内容？

我尝试使用相对位置和绝对值添加文本并将其放置在gif顶部，但这没有用。

HTML：

<! DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <link href="taniaWebsite11.css" type="text/css" rel="stylesheet">
<title> </title>

</head>
<body class="mainpage12">
<center>


<img src="giphy1.gif">
<img src="1.gif">

 </center>
</body>

</html>

CSS：

img{
height:1000px;
width:1000px;
 }

body.mainpage12{
background-color:black;
}

Answer 1

使用此HTML结构无法获得所需的行为，因此向您展示我的解决方案：

.outer-1 {
  position: relative;
  width: 100px;
  height: 100px;
}

.outer-1 > img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0px;
  top: 0px;
}


.outer-1 > p {
  position: relative;
  z-index: 2;
}

<! DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <link href="taniaWebsite11.css" type="text/css" rel="stylesheet">
<title> </title>

</head>
<body class="mainpage12">
<center>
  <div class="outer-1">
    <img class="img" src="https://i.ibb.co/bL5NCq2/tenor.gif" alt="tenor" border="0">
    <p>text text text, pls upvote me</p>
  </div>
  <div class="outer-1">
    <img class="img" src="https://i.ibb.co/bL5NCq2/tenor.gif" alt="tenor" border="0">
    <p>text text text, pls upvote me</p>
  </div>
 </center>
</body>

</html>

如何将图像/文本/ gif放在已经存在的gif之上？

1 个答案: