background-imageのみにfilterを掛ける。

backgroundにフィルターを掛けると、文字にまで影響が及ぶ。

before要素に画像のコピーを作り、z-indexを下げることで回避する。

:before{z-index:-1;background:inherit;filter:....;
content:' ';position:absolute;width:100%;height:100%;
overflow:hidden;}

フィルターの構文

/* .x{filter:yyyy} */
.f-40{filter: brightness(35%);}

パターン

/*pattern
brightness(35%);
brightness(260%);
invert(100%);
sepia(100%);
grayscale(100%);
opacity(20%);
blur(5px);
hue-rotate(100deg);
contrast(300%);
*/
/* mix
brightness(85%) blur(5px) contrast(300%) grayscale(100%);
*/

/*mixin*/
@mixin filter($cls:'filter',$filter:brightness(40%)){
  
  img.#{$cls},canvas.#{$cls}{filter:$filter}
.#{$cls}:not(img):not(canvas){z-index:0;position:relative}
.#{$cls}:not(img):not(canvas):before{z-index:-1;background:inherit;filter:$filter;
content:' ';position:absolute;width:100%;height:100%;
overflow:hidden;}
  
}

$f-40: brightness(40%);
@include filter('f-40',$f-40);/*make class the .f-40*/

全部

@mixin filter($cls:'filter',$filter:brightness(40%)){
  
  img.#{$cls},canvas.#{$cls}{filter:$filter}
.#{$cls}:not(img):not(canvas){z-index:0;position:relative}
.#{$cls}:not(img):not(canvas):before{z-index:-1;background:inherit;filter:$filter;
content:' ';position:absolute;width:100%;height:100%;
overflow:hidden;}
  
}

$f-40: brightness(40%);
@include filter('f-40',$f-40);
/*pattern
brightness(35%);
brightness(260%);
invert(100%);
sepia(100%);
grayscale(100%);
opacity(20%);
blur(5px);
hue-rotate(100deg);
contrast(300%);
*/
/* mix
brightness(85%) blur(5px) contrast(300%) grayscale(100%);
*/

div{color:whitesmoke}
.card{
  width:250px;
  height:200px;
  border:1px solid;
  background-image:url('https://i.imgur.com/1JQ7yss.png');
  background-position:center;
  background-size:cover;
}

<div class="card">aaabbbccc</div>
<div class="card f-40">aaabbbccc</div>
<hr>
<img src="https://i.imgur.com/1JQ7yss.png" ></img>
<img src="https://i.imgur.com/1JQ7yss.png" class="f-40"></img>