css - 如何使图像变暗并为图像设置渐变而没有变暗效果？

This question already has answers here:

How to apply a CSS filter to a background image
                                
                                    （15个答案）
                                
                        
                                6天前关闭。
            
                    
我需要将图像设置为背景。然后需要将其变暗。需要从底部-白色-顶部-透明设置渐变。问题是：当我使图像变暗时-渐变也会变暗，这是我不想要的。我试图通过添加另一个块在叠加上进行制作，但是它不起作用。
这是代码：

.bg {
    background: url('../../public/images/Hero.png') no-repeat;
    background-size: contain;
    z-index: -1;
    position: relative;
    height: 700px;
    width: 100%;
    filter: brightness(90%);
    &::before {
        content: '';
        display: block;
        position: absolute;
        background-image: linear-gradient(0deg,  rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
        height: 100%;
        width: 100%
    }
}

最佳答案

在.bg块中添加一个新块，将其样式设置为：

.bg-fade {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
}

并删除过滤器属性

关于css - 如何使图像变暗并为图像设置渐变而没有变暗效果？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59707890/