React生产构建中Filter的brightness与opacity属性失效求助

开发个人网站时实现卡片hover交互：初始状态卡片尺寸较小，鼠标悬停时卡片展开、背景变暗并显示白色文本。npm start启动开发环境时效果正常，但执行npm run build构建生产版本，再用serve -s build启动后，发现.filter-div的brightness滤镜和opacity属性失效。通过元素检查发现，鼠标悬停时.filter-div的opacity被设置为1%，手动改回90%后效果恢复正常，该问题在Chrome和Edge浏览器中均存在。

修复方案 #

1. 修正CSS语法与布局错误 #

• 将CSS中百分比形式的opacity值改为小数：把.filter-div的opacity: 0%改成opacity: 0，hover状态的opacity: 90%改成opacity: 0.9。生产构建的CSS压缩工具对百分比格式的opacity可能存在解析异常，小数形式更稳定。
• 修正媒体查询中.filter-div的初始height：当前写的是100px，应和.img-box的200px保持一致，避免布局错位导致样式解析异常。
• 为hover状态的.filter-div样式增加优先级，比如使用.img-box:hover > .filter-div选择器，确保样式能正确覆盖初始值。

2. 调整CSS压缩配置 #

Create React App生产构建默认使用cssnano压缩CSS，部分配置会导致opacity百分比被错误转换。可在package.json中添加配置禁用该行为：

"cssnano": {
  "preset": [
    "default",
    {
      "normalizeOpacity": false
    }
  ]
}

3. 重构交互逻辑（简化方案） #

移除.filter-div元素，直接在.img-box的hover状态添加背景覆盖和滤镜效果，减少嵌套元素的样式冲突：

.img-box:hover {
  width: 300px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.9);
  background-blend-mode: overlay;
  filter: brightness(50%);
}

同时删除.filter-div相关的所有CSS规则，简化组件结构。

原始代码 #

JSX组件 #

import React from 'react';
import './galleryPanel.css'

function galleryPanel({image, title, text}) {
    return (
       <div className="img-box" style={{backgroundImage: `url(${image})`}}>
           <div className="filter-div"/>
            <div className="gallery-content">
                    <h3>{title}</h3>
                    <p1>{text}</p1>
            </div>
       </div>
    )
}
  
export default galleryPanel

CSS样式 #

.img-box{
    width: 100px;
    height: 500px;
    margin: 30px;
    border-radius: 50px;
    box-shadow: 0px 0px 15px -5px;
    background-size: cover;
    background-position: center;
    position:relative;
    transition: width 0.5s;
}

.filter-div{
    width: 100px;
    height:500px;
    filter: brightness(50%);
    border-radius: 50px;
    opacity: 0%;
    position:relative;
}

.img-box:hover .filter-div{
    width: 300px;
    height:500px;
    background-color: #ffff;
    opacity: 90%;
    z-index: 5;
    transition: width 0.5s;
}

.img-box h3{
    position:absolute;
    left: 30px;
    top: 10px;
    opacity: 0;
    transition: bottom 0.5s;
    color: #ffff;
}

.img-box p1{
    position:absolute;
    left: 30px;
    top: 100px;
    opacity: 0;
    transition: bottom 0.5s;
    color: #ffff;
}

.img-box:hover {
    width:300px;
    cursor:pointer;
}

.img-box:hover h3{
    opacity: 1;
    color: #ffff;
    z-index: 10;
}

.img-box:hover p1{
    opacity: 1;
    color: #ffff;
    z-index: 10;
}

@media screen and (max-width: 980px) {
    .img-box{
        width: 100px;
        height: 200px;
        margin: 30px;
        border-radius: 50px;
        box-shadow: 0px 0px 15px -5px;
        background-size: cover;
        background-position: center;
        transition: width 0.5s;  
    }

    .filter-div{
        width: 100px;
        height:100px;
        position:relative;
    }

    .img-box:hover .filter-div{
        width: 300px;
        height:200px;
        cursor:pointer;
        background-color: #ffff;
        opacity: 90%;
        z-index: 5;
        transition: width 0.5s;
    }
}

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