我是 HTML 的初学者，我正在尝试创建网格和图像，我想将文本翻转到图像上，但我做不到。有人愿意帮助我吗？我做了几次测试，但没有任何效果。如果我停下来，我正在研究这个，逐渐地我明白了，但这次我需要帮助。代码:
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
position:relative;
}
div.img:hover {
border: px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
#NomeAnime {
position:relative;
width:98%;
left:2px;
top:-20%; /* Posição vertical */
color: white; /* Cor do texto */
font: bold 13px arial, sans-serif; /* Fonte */
text-align: center; /* Alinhamento */
height: 16px;
overflow: hidden;
background-color:green;
}
</style>
</head>
<body>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200">
<div id="NomeAnime">teste</div></div>
</div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400">
<div id="NomeAnime">teste</div></div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400">
<div id="NomeAnime">teste</div></div>
</div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400">
<div id="NomeAnime">teste</div></div>
</div>
</body>
</html>最佳答案
您应该将 id="NomeAnime" 更改为 class="NomeAnime"，因为每个 HTML 的 id 标识符应该是唯一的节点；
将您的 css 类声明从 #NomeAnime 更改为 .NomeAnime 以匹配类选择器；
最后，将 position:relative 更改为“position:absolute”，将 top:-20%' 更改为top:20%` 或根据需要更改。
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
position:relative;
}
div.img:hover {
border: px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
.NomeAnime {
position:absolute;
width:98%;
left:2px;
top:20%; /* Posição vertical */
color: white; /* Cor do texto */
font: bold 13px arial, sans-serif; /* Fonte */
text-align: center; /* Alinhamento */
height: 16px;
overflow: hidden;
background-color:green;
}
</style>
</head>
<body>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200">
<div class="NomeAnime">teste</div></div>
</div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400">
<div class="NomeAnime">teste</div></div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400">
<div class="NomeAnime">teste</div></div>
</div>
<div class="img">
<img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400">
<div class="NomeAnime">teste</div></div>
</div>
</body>
</html>关于javascript - 网格图像 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42569349/