如何用CSS实现图片hover时添加蓝色滤镜且保留原有色彩

你可以直接用CSS的滤镜属性或伪元素叠加层来实现，不用加载第二张图片，同时保留原图原有色彩：

方法1：使用CSS filter 属性（简单直接） #

修改你的CSS，去掉重复的选择器，在hover状态下添加滤镜参数，通过调整色相、饱和度等调出蓝色调：

.home-container .theme1 {
    background-size: cover;
    background: url('../img/myImage') no-repeat center;
    transition: filter 0.3s ease; /* 加过渡动画让hover效果更流畅 */
}

.home-container .theme1:hover {
    /* 可根据你的图片调整参数数值，调出合适的蓝色效果 */
    filter: hue-rotate(190deg) saturate(1.2) brightness(0.9);
}

参数说明：

• hue-rotate(190deg)：将原图色相向蓝色方向旋转
• saturate(1.2)：提高饱和度，让蓝色更鲜明
• brightness(0.9)：略微降低亮度，避免颜色过曝

方法2：伪元素叠加半透明蓝色层（精准可控） #

如果需要更精准控制蓝色的深浅和融合效果，可以用伪元素在背景图上方叠加一层半透明蓝色，通过混合模式让颜色自然融合：

.home-container .theme1 {
    position: relative;
    background-size: cover;
    background: url('../img/myImage') no-repeat center;
}

.home-container .theme1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 100, 255, 0.2); /* 蓝色+透明度，0.2可按需调整 */
    mix-blend-mode: multiply; /* 混合模式，让蓝色与原图自然融合，不覆盖原有色彩 */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.home-container .theme1:hover::before {
    opacity: 1;
}

这种方法的优势是可以精准控制蓝色的颜色值和透明度，混合模式能保证原图的纹理和色彩细节被保留。

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