如何实现容器文本hover显示、背景图半透明的交互效果？

你的代码问题出在hover状态下直接用background属性替换了原本的背景图，导致hover时看不到原图，只显示红色半透明背景。要实现默认显示背景图、隐藏文本，hover时显示文本且背景图略微透明的效果，修改如下：

修改后的CSS代码 #

.container{
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 100px;
    padding: 18px 40px;
    font-size: 22px;
    text-align: center;
    width: 250px;
    height: 250px;
    border-radius: 35px;
    /* 默认隐藏文本，用opacity配合过渡更自然 */
    opacity: 0;
    color: black;
    line-height: 200px;
    float: left;
    margin-left: 20%;
    background-image: url(https://i.sstatic.net/MLu3i.jpg);
    /* 添加过渡动画，让状态切换更流畅 */
    transition: all 0.3s ease;
}
.container:hover{
    /* 叠加半透明黑色层，让背景图视觉上变暗（实现“略微透明”的效果） */
    background-color: rgba(0, 0, 0, 0.3);
    /* 可选：用混合模式让颜色和背景图融合更自然 */
    background-blend-mode: overlay;
    /* 显示文本 */
    opacity: 1;
}

关键修改点 #

• 移除hover时替换background的代码，改用background-color叠加半透明颜色层，保留原背景图。
• 用opacity: 0默认隐藏文本，hover时设为opacity: 1显示，配合transition实现平滑过渡。
• 如果想要红色半透明叠加层，把rgba(0, 0, 0, 0.3)改成rgba(255, 0, 0, 0.3)即可。

如果你更倾向于用color: transparent隐藏文本，也可以用这个版本：

.container{
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 100px;
    padding: 18px 40px;
    font-size: 22px;
    text-align: center;
    width: 250px;
    height: 250px;
    border-radius: 35px;
    color: transparent;
    line-height: 200px;
    float: left;
    margin-left: 20%;
    background-image: url(https://i.sstatic.net/MLu3i.jpg);
    transition: color 0.3s ease, background-color 0.3s ease;
}
.container:hover{
    background-color: rgba(0, 0, 0, 0.3);
    color: black;
}

内容的提问来源于stack exchange，提问作者Zoha Javed