CSS渐变在FireFox中不显示求助：悬停图片时渐变无效

问题原因分析 #

• 你使用了CSS预处理器的嵌套语法，但原生CSS不支持这种嵌套写法，FireFox作为标准浏览器无法解析这类嵌套规则，导致hover时的渐变样式根本没被应用。
• .gradient::after 伪元素缺少必要渲染属性：伪元素默认不会显示，必须设置 content 属性（哪怕是空值），同时需要定位、宽高属性来让渐变覆盖在图片上，否则FireFox无法渲染这个伪元素的背景渐变。

修正后的代码 #

先把嵌套选择器展开为原生CSS支持的写法，同时补全伪元素的必要属性：

/* 展开嵌套选择器，适配原生CSS */
.last-update .content:hover #title {
    display: block;
    animation: fade-in 150ms; 
}

.last-update .content:hover .gradient::after {
    content: ''; /* 伪元素必须的属性，否则无法显示 */
    position: absolute; /* 基于父元素定位，需配合.gradient的相对定位 */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 可根据需求调整渐变覆盖高度，比如60% */
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #000 100%);
}

/* 给父元素设置相对定位，让伪元素能正确覆盖 */
.gradient {
    position: relative;
    overflow: hidden; /* 防止渐变超出父元素范围 */
}

额外注意事项 #

• 如果项目用了Sass/Less等预处理器，要确保代码已编译为原生CSS再部署，否则所有浏览器都无法识别嵌套语法，不只是FireFox。
• 检查fade-in动画是否已定义，缺少@keyframes的话标题淡入效果也会失效：

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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