Непрозрачность фонового изображения влияет на значок поверх него

Question

Я использую компонент Card из Material UI. Это выглядит так:

Вы можете видеть и то, и другое: значок звездочки и плюса унаследовал непрозрачность от фонового изображения.

Я хочу, чтобы значок «Плюс» имел opacity 1. Это возможно? Вот код:

<Card
    style={{
        position: "relative",
    }}
>
    <IconButton
        color="primary"
        className={classes.star}
        style={{
            pointerEvents: itemEnabled ? "auto" : "none"
        }}
    >
        {item.favorite ? <Star /> : <StarBorder />}
    </IconButton>
    <IconButton
        color="primary"
        className={classes.permission}
        onClick={e => {
            e.preventDefault();
            e.stopPropagation();
            console.log("test")
        }}
    >
        <Add />
    </IconButton>
    <CardActionArea style={{
        width: "100%",
        pointerEvents: itemEnabled ? "auto" : "none"
    }}>
        <CardMedia
            className={classes.media}
            image={requiredImage}
            style={{
                opacity: itemEnabled ? 1 : 0.4,
            }}
            title={item.favorite ? item.link.name : item.name}
        />
    </CardActionArea>
</Card>

вот некоторые стили, используемые в className, если интересно:

const styles = theme => ({
    media: {
        height: 140,
        width: "100%"
    },
    star: {
        position: "absolute",
        right: 0,
        color: "white",
        zIndex: 555
    },
    permission: {
        position: "absolute",
        right: 0,
        top: 30,
        color: "white",
        zIndex: 555
    },
    linksTitle: {
        padding: 20
    }
});