Targeting image with extention CSS3

when images are loading or broken we should put a fancy background-color for users.
But in png even after images are loaded background- color will be too visible, why? because it a png.
we need js to know its loading time.

Here I use CSS: not selector with detecting the Extention property.

Targeting image with extention CSS3

.image img:not([src$=’.png’]){
@include bg;
white-space: wrap;
font-size: 12px;
display: flex;
justify-content: center;
align-items:center;
}

it will help you when you are showing input file uploader, where file type can be anything.
solution: wrap everything in image src attribute and use the background property to show other file type but png

result