在网页设计中，尤其是在图片画廊或产品展示页面，我们经常需要实现鼠标悬停在图片上时，显示图片相关信息（如标题、描述）的效果。这要求文本能够精确地覆盖在图片上方，同时不影响页面的整体布局和响应性。本教程将详细介绍如何通过css的定位属性 (position) 结合 flexbox 布局，优雅地解决这一问题。
首先，我们需要一个清晰的HTML结构来承载图片和其对应的文本信息。每个画廊项 (<li>) 将包含一个图片 (<img>) 和一个用于显示文本的容器 (<div>)。
<div class="gallery-container">
<ul class="gallery">
<li class="image">
<img src="https://picsum.photos/500?random=1" alt="随机图片1">
<div class="image-name">图片名称一</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=2" alt="随机图片2">
<div class="image-name">图片名称二</div>
</li>
<!-- 更多图片项... -->
</ul>
</div>在这个结构中，.gallery-container 和 .gallery 用于构建画廊的整体布局，而每个 .image (即 <li> 元素) 内部则包含了一张图片和一个名为 .image-name 的 div，后者将用于显示悬停时的文本。
实现图片上文本叠加的关键在于CSS的 position 属性。我们将利用相对定位 (position: relative) 和绝对定位 (position: absolute) 的组合。
父元素相对定位 (position: relative)：将 <li> 元素设置为 position: relative。这使得 <li> 成为其内部绝对定位子元素的参考系。这意味着，任何在其内部设置了 position: absolute 的元素，都将相对于这个 <li> 元素进行定位，而不是相对于整个文档。
立即学习“前端免费学习笔记（深入）”；
子元素绝对定位 (position: absolute)：将文本容器 (.image-name) 设置为 position: absolute。结合 top: 0; left: 0; right: 0; bottom: 0;，可以使其完全覆盖其相对定位的父元素 (<li>)。
除了定位，我们还将使用 Flexbox 来构建画廊的整体布局，并确保文本在覆盖层中居中显示。
首先，为画廊容器和列表设置基础样式，使其呈现为响应式的图片网格。
.gallery-container {
border: 2px black solid; /* 示例边框 */
}
.gallery {
margin-top: 1em;
margin-bottom: 1em;
list-style: none; /* 移除列表默认样式 */
display: flex; /* 启用 Flexbox 布局 */
flex-wrap: wrap; /* 允许项目换行 */
flex-direction: row; /* 项目水平排列 */
margin-left: auto;
margin-right: auto; /* 居中画廊 */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
gap: 10px; /* 项目间距 */
}每个 <li> 元素是画廊中的一个独立项。我们将为其设置相对定位，并使其内部内容（图片和文本）能够居中。
.image {
position: relative; /* 关键：设置为相对定位，作为子元素绝对定位的参考 */
transition: transform 0.4s, opacity 0.4s; /* 为悬停效果添加平滑过渡 */
cursor: pointer; /* 鼠标悬停时显示手型光标 */
max-width: 90%; /* 控制每个画廊项的最大宽度，根据需要调整 */
margin-left: auto;
margin-right: auto; /* 辅助居中 */
display: flex; /* 启用 Flexbox */
align-items: center; /* 垂直居中对齐 */
justify-content: center; /* 水平居中对齐 */
overflow: hidden; /* 确保缩放的图片不会溢出 */
}图片需要填充其父 <li> 元素，并保持其宽高比。
.image img {
display: block; /* 移除图片底部默认空白 */
max-width: 100%; /* 确保图片充满父容器 */
height: auto; /* 保持图片宽高比 */
margin: 0; /* 移除默认外边距 */
}这是实现文本叠加的核心部分。文本容器将被绝对定位，覆盖整个 <li> 元素，并初始设置为透明不可见。
.image-name {
position: absolute; /* 关键：设置为绝对定位 */
top: 0;
left: 0;
right: 0;
bottom: 0; /* 使其完全覆盖父元素 .image */
color: ivory; /* 文本颜色 */
background-color: rgba(94, 88, 94, 0.8); /* 半透明背景，可根据喜好调整 */
opacity: 0; /* 初始隐藏 */
display: flex; /* 启用 Flexbox，用于文本内容居中 */
align-items: center; /* 垂直居中文本 */
justify-content: center; /* 水平居中文本 */
text-align: center; /* 确保多行文本也能居中 */
transition: opacity 500ms; /* 为文本显示添加过渡效果 */
padding: 10px; /* 增加内边距 */
box-sizing: border-box; /* 防止 padding 撑大元素 */
}最后，为 <li> 元素添加 :hover 伪类，实现鼠标悬停时的动态效果。
.image:hover {
transform: scale(1.05); /* 鼠标悬停时图片轻微放大 */
opacity: 0.7; /* 图片变半透明，以便看到下方文本 */
}
.image:hover .image-name {
opacity: 1; /* 鼠标悬停时文本完全显示 */
}将上述HTML和CSS整合，即可实现图片上叠加文本并带有悬停交互的画廊效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片文本叠加悬停效果</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.gallery-container {
max-width: 1200px;
margin: 0 auto;
border: 2px black solid; /* 示例边框 */
padding: 10px;
background-color: #fff;
}
.gallery {
margin-top: 1em;
margin-bottom: 1em;
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0; /* 移除默认内边距 */
}
.image {
position: relative;
transition: transform 0.4s, opacity 0.4s;
cursor: pointer;
max-width: calc(33% - 10px); /* 示例：每行3个，减去gap */
flex-basis: calc(33% - 10px); /* 确保在flex布局中宽度计算正确 */
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden; /* 隐藏溢出内容，尤其是在transform scale时 */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
}
.image img {
display: block;
max-width: 100%;
height: auto;
margin: 0;
}
.image-name {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: ivory;
background-color: rgba(94, 88, 94, 0.8);
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: opacity 500ms;
padding: 10px;
box-sizing: border-box;
font-size: 1.2em;
font-weight: bold;
}
.image:hover {
transform: scale(1.05);
opacity: 0.7;
z-index: 1; /* 确保悬停元素在上方 */
}
.image:hover .image-name {
opacity: 1;
}
/* 响应式调整 */
@media (max-width: 768px) {
.image {
max-width: calc(50% - 10px); /* 两列布局 */
flex-basis: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.image {
max-width: 100%; /* 单列布局 */
flex-basis: 100%;
}
}
</style>
</head>
<body>
<div class="gallery-container">
<ul class="gallery">
<li class="image">
<img src="https://picsum.photos/500?random=1" alt="随机图片1">
<div class="image-name">图片名称一</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=2" alt="随机图片2">
<div class="image-name">图片名称二</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=3" alt="随机图片3">
<div class="image-name">图片名称三</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=4" alt="随机图片4">
<div class="image-name">图片名称四</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=5" alt="随机图片5">
<div class="image-name">图片名称五</div>
</li>
<li class="image">
<img src="https://picsum.photos/500?random=6" alt="随机图片6">
<div class="image-name">图片名称六</div>
</li>
</ul>
</div>
</body>
</html>以上就是CSS教程：在图片上叠加文本并实现悬停显示效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
233
收藏
