HTML/CSS图片悬停时文本颜色显示异常问题求助

嘿，我来帮你搞定这个文本显示不清的问题！你现在遇到的核心问题是直接给父容器.pic设置了opacity，这会让容器里的所有内容（包括你的文本层）都跟着变透明，哪怕你给.text单独设置了透明度和颜色，也会被父元素的半透明效果影响，导致文本看起来发虚模糊。

正确的解决方案：用伪元素做遮罩层 #

我们可以用.pic的伪元素::after来创建灰色遮罩，这样遮罩层和文本层是分离的，文本可以完全显示在遮罩上方，不会被父元素的透明度影响。

以下是修改后的完整CSS代码，我标注了关键修改点：

body{
 background-color:#333;
 color:#fff;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 line-height: 1.6em;
 margin:0;
}
.container{
 width:80%;
 margin:auto;
 overflow:hidden;
}
.pic{
 background-image: url(../images/desk.jpg);
 background-position: center ;
 min-height: 300px;
 margin-bottom:30px;
 text-align: center ;
 position: relative; /* 新增：让伪元素相对于这个容器定位 */
}
/* --- 关键修改1：移除.pic:hover的opacity，改用伪元素做遮罩 --- */
.pic::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0); /* 默认完全透明 */
 transition: .5s ease;
}
.pic:hover::after {
 background-color: rgba(0, 0, 0, 0.7); /* 悬停时显示灰色遮罩，透明度0.7可调整 */
}
.text{
 padding-top:135px;
 color:#000;
 opacity:0;
 position: relative; /* 新增：让文本层级高于遮罩 */
 z-index: 1; /* 关键：确保文本在遮罩层上方 */
 text-align: center;
 transition: .5s ease; /* 把过渡效果移到这里，统一管理 */
}
.pic:hover .text{
 color:#fff;
 opacity:1; /* 改为完全不透明，让文本清晰显示 */
 text-align: center;
 font-size:20px;
 font-weight:700;
 font-family:"Arial", Times, serif;
 padding-top:135px;
 /* 移除重复的transition和position，已经在.text里设置了 */
}
#main-header{
 background-color:#000;
 color:#fff;
 padding:10px; /* 你之前漏了px，补上 */
}
#nav-bar{
 background-color:#000;
 color:#fff;
}
#nav-bar ul{
 padding:10px; /* 补上px */
 list-style: none;
}
#nav-bar li{
 display: inline;
}
#nav-bar a{
 color:#fff;
 text-decoration: none;
 font-size:18px;
 padding-right:15px;
}
#nav-bar a:hover{ /* 你之前的冒号和hover之间多了空格，修正 */
 color: coral; /* 去掉多余的# */
}
#showcase{
 background-image: url(../images/showcase.jpg);
 background-position: center right;
 min-height: 300px;
 margin-bottom:30px;
 text-align: center ;
}
#showcase h1{
 color: #fff;
 font-size: 50px;
 line-height: 1.6em;
 padding-top: 30px;
}

关键修改点说明： #

1. 给.pic添加position: relative：让伪元素可以相对于这个容器定位，不会跑到页面其他地方。
2. 用::after伪元素创建遮罩：遮罩层是独立的，不会影响文本的透明度，悬停时只改变遮罩的背景色透明度。
3. 给.text设置z-index: 1：确保文本层级高于遮罩层，这样文本就会显示在遮罩上方。
4. 修正了几个小语法错误：比如padding:10要加px，a: hover的空格要去掉，#coral多了#号等。
5. 优化过渡效果：把.text的过渡效果移到默认状态，避免重复代码，让动画更流畅。

这样修改后，你悬停图片时，灰色遮罩会慢慢显示，文本也会清晰地从黑色切换到白色，完全不会出现模糊的问题啦！

内容的提问来源于stack exchange，提问作者Cass Hunter-McGoldrick