如何仅对background-image应用滤镜修改Chevron颜色，不影响背景色

直接给元素添加filter属性会同时影响背景色和背景图，要实现只修改图标颜色，你可以通过伪元素分离背景色与背景图的方式解决：

• 移除原元素的background-image、background-position-x、background-position-y、background-repeat这些和背景图相关的属性；
• 给元素添加position: relative，为伪元素定位做准备；
• 使用::after伪元素承载Chevron图标，单独对伪元素应用滤镜。

修改后的完整CSS代码如下：

background-color: #cdfdfd;
text-align: left !important;
border-radius: 0.7vw;
transition: background-color 250ms;
color: #282828;
position: relative; /* 添加相对定位 */

/* 伪元素承载图标并应用滤镜 */
&::after {
    content: '';
    position: absolute;
    right: 1rem; /* 可根据需求调整距离 */
    top: 50%;
    transform: translateY(-50%);
    width: 16px; /* 图标宽度，按需调整 */
    height: 16px; /* 图标高度，按需调整 */
    background-image: url(chevron-right-v2.svg);
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1); /* 白色图标转黑色，若图标非纯白可搭配brightness(0) */
}

原理说明 #

• 原元素仅保留背景色和基础样式，伪元素独立承载图标，二者样式互不干扰；
• filter: invert(1)可直接将白色图标转为黑色，若图标不是纯白色，可使用filter: invert(1) brightness(0)确保完全变为黑色；
• 伪元素通过绝对定位和transform: translateY(-50%)实现垂直居中，效果与原代码的background-position-y: center一致。

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