Question

我有一个面向CSS的问题。我需要渲染一张带有褪色背景的卡片列表，以使其与不透明的重叠文本半透明。我在下面分享了两张图片：

第一张图像完全完成了我想做的事情（因为背景模糊不会模糊叠加文字），但是问题是我使用了实质性的UI主题（我想这就是它的名字），我无法弄清楚如何使backgroundImage属性保留这些对象的动态值。如何使backgroundImage动态化，以便获得第二张图片中的所有图片？像这样的事情，我尝试了但不起作用：{classes.categoryCard.backgroundImage = url（$ {el.image}）}

注意：第二个屏幕快照的问题是我正在使用图像标签来获取图片，这使得动态渲染图像更加容易，但是我无法通过这种方式将模糊与覆盖文本分开

组件中的

代码：

// images
import deals from "../assets/deals.jpg";
import breakfast from "../assets/breakfast.jpg";
import fastfood from "../assets/fastfood.jpg";
import mexican from "../assets/mexican.jpg";
import vegan from "../assets/vegan.jpg";
import american from "../assets/american.jpg";
import healthy from "../assets/healthy.jpg";
import chinese from "../assets/chinese.jpg";
import pizza from "../assets/pizza.jpg";
import coffee from "../assets/coffee.jpg";
const categoryArr = [
    {category: 'Latest Deals', image: deals},
    {category: 'Breakfast and Brunch', image: breakfast},
    {category: 'Fast Food', image: fastfood},
    {category: 'Mexican', image: mexican},
    {category: 'Vegan', image: vegan},
    {category: 'American', image: american},
    {category: 'Healthy', image: healthy},
    {category: 'Pizza', image: pizza},
    {category: 'Chinese', image: chinese},
    {category: 'Coffee and Tea', image: coffee},
]
const DineSearch = props => {
    // const [trucksByType, setTrucksByType] = useState([]);
    const useStyles = makeStyles({
            categoryCard: {
                backgroundImage: `url(${chinese})`,
                backgroundSize: 'cover',
                backgroundRepeat: 'no-repeat',
                height: 200,
            }
          });
    const classes = useStyles();
    const selectCategory = (category) => {
        props.getTrucksByCuisine(category)
            .then(props.history.push(`/diner/${props.dinerId}`))
    }
    return (
        <div>
            <h1>This is the Dine Search component</h1>
            <Grid className="category-grid" container spacing={1}>
                {categoryArr.map(el => (
                    <Grid item xs={6}>
                        <Card className={classes.categoryCard} onClick={() => selectCategory(el.category)}>
                                <div className="category-image-wrapper">
                                <CardMedia
                                    className="category-image"
                                    // image={el.image}
                                />
                                </div>
                                <div className="category-text-wrapper">
                                <Typography className="category-text" component="h2">
                                    {el.category}
                                </Typography>
                                </div>
                        </Card>
                    </Grid>
                ))}
            </Grid>
            <DinerFooter />
        </div>
    )
}

Answer 1

您可以尝试将图片作为道具backgroundImage传递：

<CardMedia
    className="category-image"
    backgroundImage={el.image}
/>

然后，在CardMedia组件的文件中，根据在其中存在的任何DOM元素的style prop中传递的prop附加一些内联CSS（我正在使用{{1 }}）：

<div>

Answer 2

我通过使用内联样式来完成这项工作。

<Card 
className={classes.categoryCard} 
style={{ backgroundImage: `url(${el.image})` }} 
onClick={() => selectCategory(el.category)}
>

使材质UI主题中的backgroundImage属性变为动态

2 个答案: