วิธีการใช้สีไล่ระดับในตอนท้ายของเนื้อหา? [ซ้ำ]

Aug 18 2020

ฉันกำลังพยายามจำลอง 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;
}

ขอความช่วยเหลือใด ๆ ขอบคุณ🙂

คำตอบ

Adam Aug 18 2020 at 18:00

ฉันไม่แน่ใจว่าฉันเข้าใจคำถามหรือไม่ ถ้าฉันทำกับแซนด์บ็อกซ์โค้ดตัวอย่างจริงมันจะขยายเมื่อวางเมาส์เหนือ บางทีคุณอาจพบคำตอบ?