【问题标题】：How do have text appear over my images?我的图像上如何显示文字？
【发布时间】：2023-03-12 06:13:01
【问题描述】：
到目前为止，我已经按照自己喜欢的方式编写了代码（此站点正在进行中），并且我意识到当我将光标悬停在图像上时，我需要在图像上显示文本。我是一个菜鸟，我的代码中发生了很多事情，以至于我把自己搞糊涂了，我第一次去论坛。
这里是html：
.img-single {
width: 550px;
height: 367px;
float: left;
margin: 40px 15px;
position: relative;
}
.img-single img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
}
.img-single img:hover {
width: 110%;
height: 110%;
position: absolute;
top: -5%;
left: -5%;
}
.img-single:hover {
z-index: 1000;
}
.wrapper {
width: 1160px;
margin: 0 auto;
}
.port-box {
overflow: hidden;
padding; 80px 0px;
}
<body>
<nav>
<ul>
<li><a href="home.html"> Home </a></li>
<a href="home.html"><div class="logo"></div></a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn active">My Work</a>
<div class="dropdown-content">
<a href="#">Cars</a>
<a href="#">Dogs</a>
<a href="#">Landscapes</a>
<a href="#">Concerts</a>
<a href="#">Nature</a>
<a href="#">Misc</a>
</div>
<li><a href="about.html"> About me </a></li>
<li><a href="contact.html"> Contact Me </a></li>
</ul>
</nav>
<main>
<div class="port-box">
<div class="wrapper">
<a href="cars.html">
<div class="img-single">
<img src="images/hud.jpg">
</div>
</a>
<a href="dogs.html">
<div class="img-single">
<img src="images/rocky.jpeg">
</div>
</a>
<a href="landscapes.html">
<div class="img-single">
<img src="images/sunset.jpg">
</div>
</a>
<a href="concerts.html">
<div class="img-single">
<img src="images/concert.jpeg">
</div>
</a>
<a href="nature.html">
<div class="img-single">
<img src="images/nature.jpg">
</div>
</a>
<a href="misc.html">
<div class="img-single">
<img src="images/misc.jpeg">
</div>
</a>
</div>
</div>
</main>
<div class="footer">
Copyright © 2017 Richard Spradling
</div>
</body>
我意识到已经有一个悬停效果，我想用出现的文本替换它。谢谢。
【问题讨论】：
标签：
html
css
image
text
hover
【解决方案1】：
添加了一个带有绝对位置和文本的 div 叠加层。如果您正在寻找具有悬停效果的文本，那么，
.img-single {
width: 550px;
height: 367px;
float: left;
margin: 40px 15px;
position: relative;
}
.img-single img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
}
.img-single:hover {
z-index: 1000;
}
.wrapper {
width: 1160px;
margin: 0 auto;
}
.port-box {
overflow: hidden;
padding;
80px 0px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.img-single:hover .overlay {
opacity: 1;
}
<nav>
<ul>
<li><a href="home.html"> Home </a></li>
<a href="home.html">
<div class="logo"></div>
</a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn active">My Work</a>
<div class="dropdown-content">
<a href="#">Cars</a>
<a href="#">Dogs</a>
<a href="#">Landscapes</a>
<a href="#">Concerts</a>
<a href="#">Nature</a>
<a href="#">Misc</a>
</div>
<li><a href="about.html"> About me </a></li>
<li><a href="contact.html"> Contact Me </a></li>
</ul>
</nav>
<main>
<div class="port-box">
<div class="wrapper">
<a href="cars.html">
<div class="img-single">
<img src="http://via.placeholder.com/350x150">
<div class="overlay">
<div class="text">This Is My First Pic</div>
</div>
</div>
</a>
<a href="dogs.html">
<div class="img-single">
<img src="http://via.placeholder.com/350x150">
<div class="overlay">
<div class="text">This Is My Second Pic</div>
</div>
</div>
</a>
<a href="landscapes.html">
<div class="img-single">
<img src="http://via.placeholder.com/350x150">
<div class="overlay">
<div class="text">This Is My Third Pic</div>
</div>
</div>
</a>
<a href="concerts.html">
<div class="img-single">
<img src="http://via.placeholder.com/350x150">
<div class="overlay">
<div class="text">This Is My Fourth Pic</div>
</div>
</div>
</a>
<a href="nature.html">
<div class="img-single">
<img src="http://via.placeholder.com/350x150">
<div class="overlay">
<div class="text">This Is My Fifth Pic</div>
</div>
</div>
</a>
<a href="misc.html">
<div class="img-single">
<img src="http://via.placeholder.com/350x150">
<div class="overlay">
<div class="text">This Is My Sixth Pic</div>
</div>
</div>
</a>
</div>
</div>
</main>
<div class="footer">
Copyright © 2017 Richard Spradling
</div>
【解决方案2】：
您可以在图像上没有悬停时使用display: none;，而在图像上悬停时使用display: block;
.img-single {
width: 550px;
height: 367px;
float: left;
margin: 40px 15px;
position: relative;
}
.img-single img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
}
.img-single img:hover {
width: 110%;
height: 110%;
position: absolute;
top: -5%;
left: -5%;
}
.img-single:hover {
z-index: 1000;
}
.wrapper {
width: 1160px;
margin: 0 auto;
}
.port-box {
overflow: hidden;
padding;
80px 0px;
}
.textimg {
display: none;
position: absolute;
top: 50%;
right: 50%;
}
.img-single:hover .textimg {
display: block;
}
<nav>
<ul>
<li><a href="home.html"> Home </a></li>
<a href="home.html">
<div class="logo"></div>
</a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn active">My Work</a>
<div class="dropdown-content">
<a href="#">Cars</a>
<a href="#">Dogs</a>
<a href="#">Landscapes</a>
<a href="#">Concerts</a>
<a href="#">Nature</a>
<a href="#">Misc</a>
</div>
<li><a href="about.html"> About me </a></li>
<li><a href="contact.html"> Contact Me </a></li>
</ul>
</nav>
<main>
<div class="port-box">
<div class="wrapper">
<a href="cars.html">
<div class="img-single">
<img src="images/hud.jpg">
<div class="textimg">Text</div>
</div>
</a>
<a href="dogs.html">
<div class="img-single">
<img src="images/rocky.jpeg">
<div class="textimg">Text</div>
</div>
</a>
<a href="landscapes.html">
<div class="img-single">
<img src="images/sunset.jpg">
<div class="textimg">Text</div>
</div>
</a>
<a href="concerts.html">
<div class="img-single">
<img src="images/concert.jpeg">
<div class="textimg">Text</div>
</div>
</a>
<a href="nature.html">
<div class="img-single">
<img src="images/nature.jpg">
<div class="textimg">Text</div>
</div>
</a>
<a href="misc.html">
<div class="img-single">
<img src="images/misc.jpeg">
<div class="textimg">Text</div>
</div>
</a>
</div>
</div>
</main>
<div class="footer">
Copyright © 2017 Richard Spradling
</div>
我已将此添加到您的代码中：
在 CSS 中：
.textimg {
display:none;
position: absolute;
top:50%;
right:50%;
}
.img-single:hover .textimg {
display:block;
}
HTML：
<div class="img-single">
<img src="images/misc.jpeg">
<div class="textimg">Text</div>
</div>
【解决方案3】：
首先，您应该将文本放置在图像上，方法是为父 div 添加 position: relative 并添加 position: absolute 的文本并在加载时隐藏它。
当悬停在父 div 上时显示文本。
.img-single {
position: relative;
}
.img-single .text {
position: absolute;
bottom: 0;
left: 0;
display: none;
}
.img-single:hover .text {
display: block;
}
下面是工作代码
.img-single {
width: 400px;
float: left;
margin: 40px 15px;
position: relative;
}
.img-single img {
width: 100%;
min-height: 100px;
}
.img-single .text {
position: absolute;
bottom: 0;
left: 0;
font-size: 30px;
color:#fff;
background: rgba(0, 0, 0, 0.5);
width: 100%;
display: none;
}
.img-single:hover .text {
display: block;
}
.wrapper {
width: 1160px;
margin: 0 auto;
}
.port-box {
overflow: hidden;
padding;
80px 0px;
}
<nav>
<ul>
<li><a href="home.html"> Home </a></li>
<a href="home.html">
<div class="logo"></div>
</a>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn active">My Work</a>
<div class="dropdown-content">
<a href="#">Cars</a>
<a href="#">Dogs</a>
<a href="#">Landscapes</a>
<a href="#">Concerts</a>
<a href="#">Nature</a>
<a href="#">Misc</a>
</div>
<li><a href="about.html"> About me </a></li>
<li><a href="contact.html"> Contact Me </a></li>
</ul>
</nav>
<main>
<div class="port-box">
<div class="wrapper">
<a href="cars.html">
<div class="img-single">
<img src="http://lorempixel.com/400/200/" alt="img">
<span class="text">Some text</span>
</div>
</a>
</div>
</div>
</main>
<div class="footer">
Copyright © 2017 Richard Spradling
</div>