Is it possible to only override parts of background image?

On my site I have a table with lots of rows. The classes used for each row depends on some data

In my mind I had something like this:

Classes for each row:
Row 1: selectedRow invalidRow
Row 2: defaultRow
Row 3: defaultRow invalidRow

And with CSS code like this:

.selectedRow
{
    background-image: linear-gradient(to top, #cccccc 0%, #A0A0A0 100%);
}
 
.defaultRow
{
    background-image: linear-gradient(to top, #cccccc 0%, #dddddd 100%);
}
 
.invalidRow
{
    //Haven't quite figured this one out yet. I'm trying to get a nice arrow up in the corner
 
    background: linear-gradient(to top left, transparent 50%, red <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> top left/40px 40px no-repeat, black;
}

What I'm trying to accomplish is that each row has either selectedRow or defaultRow. Some rows also has invalidRow, which is some red triangle in the corner. As it is right now, the invalidRow completely removes the background set in the others

I believe this can be avoided by creating selectedRow, selectedRowInvalid, defaultRow and defaultRow and then have these classes contain everything in the same. For this example it would probably be easiest to just do that. But what if instead of just selected/default there are many more options and each of them exists both as valid and invalid. This would be a nightmare to set up.
And in my case I also want another option, let's call it unfinishedRow, that also has an arrow in a different corner. You can have rows that are both unfinished and invalid. With my knowledge I would then need e.g. selectedRow, selectedRowInvalid, selectedRowUnfinished, selectedRowInvalidUnfinished and then again the same for defaultRow. Don't get me startet if I some day decides to add a third arrow

Is there an easy way to accomplish this? I haven't been able to find anything on Google