我试图将 quote1.jpg 放在 yoda.png 旁边，但无论我将 div 类放在何处，它最终都会在其他地方。首先它在标题的顶部，现在它覆盖了 Yoda。当您将鼠标悬停在 Yoda 上时，它应该显示他的名言，但它显示的是 quote.jpg。我要做的就是将 quote.jpg 放在 Yoda 旁边。
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 2;
}
.text {
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
/* No matter what I do I cannot
place the quote1.jpg in the correct place */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class= "container">
<img src="yoda.png" alt="Yoda"
class= "image" style = "width:50%">
<div class="text">That right, you got.
Herh herh herh.
<div class ="middle">
<img src="quote1.jpg" alt="quote">
</div>
</body>
</html> 
最佳答案
使用 javascript 或 jquery 更容易实现您的意图。 这是一个示例代码:
.header {
background: black;
color: white;
font-family: cursive, Haettenschweiler, 'Arial Narrow Bold',
sans-serif ;
margin: 20px;
padding: 20px;
text-align: center;
}
p {
background-color: blanchedalmond;
font-size: 26px;
color: black;
opacity: 1;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.text {
display:block;
opacity: 0;
background-color: rgb(13, 53, 228);
color: white;
font-size: 25px;
padding: 16px 32px;
}
.flex-container {
display: flex;
flex-flow:row wrap;
}
.block{
display: block;
background: red;
margin: 10px;
padding: 10px;
width:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Here We Go!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function show() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
function hide() {
var element = document.getElementsByClassName("text")[0];
element.classList.toggle("open");
}
</script>
</head>
<body>
<div class="header">
<h1>I Am Tying Hard To Learn Html</h1>
<p>"Do Or Do Not There Is No Try"</p>
</div>
<div class="parent">
<div class="flex-container">
<div class="block yoda-div" id="yoda">
<img src="yoda.png" alt="Yoda" class="image" onmouseover="show()">
<div class="text" onmouseout="hide()">That right, you got.
Herh herh herh.
</div>
</div>
<div class="block" id="quote">
<img src="quote1.jpg" alt="quote">
</div>
</div>
</div>
</body>
</html>
关于html - 相邻的两张图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53917235/