背景图像的不透明度会影响其顶部的图标

Question

我正在使用Material UI中的Card组件。看起来像这样：

您可以看到：Star和Plus图标已经从背景图像继承了不透明度。

我希望加号图标具有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
    }
});