javascript - 如何在内容末尾应用渐变色?
问题描述
我正在尝试复制下面添加的图像 UI(取自udemy.com课程描述部分)。我正在寻找一种方法来仅在部分内容上创建类似的渐变 UI,如下图所示。
这是我一直在试验的示例代码沙箱https://codesandbox.io/s/fervent-einstein-doeql?file=/src/Demo.js。我正在尝试将此确切的 ui 应用于material-ui
卡片内容。这是我Demo.js
定义卡片内容的地方
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles({
root: {
maxWidth: 345
}
});
export default function ImgMediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardMedia
component="img"
alt="Contemplative Reptile"
image="https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography
className="content"
variant="body2"
color="textSecondary"
component="p"
>
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica Lizards are a
widespread group of squamate reptiles, with over 6,000 species,
ranging across all continents except Antarctica Lizards are a
widespread group of squamate reptiles, with over 6,000 species,
ranging across all continents except Antarctica Lizards are a
widespread group of squamate reptiles, with over 6,000 species,
ranging across all continents except Antarctica Lizards are a
widespread group of squamate reptiles, with over 6,000 species,
ranging across all continents except Antarctica Lizards are a
widespread group of squamate reptiles, with over 6,000 species,
ranging across all continents except Antarctica Lizards are
</Typography>
</CardContent>
<div className="button">
<Button size="small">Read more</Button>
</div>
</Card>
);
}
和我的styles.css
.content {
max-height: 100px;
}
.content:hover {
max-height: none;
}
.button {
display: flex;
margin-top: 5px;
justify-content: flex-end;
width: 100%;
background-color: grey;
}
任何帮助表示赞赏。谢谢
解决方案
我不确定我是否理解这个问题。如果我对示例代码沙箱执行此操作,它实际上会在悬停时扩展。也许你找到了答案?