在React-Chrono中添加背景图像以获得投资组合经验

Question

我正在开发我的网络投资组合，并希望在每张卡(位置的壁纸)中添加背景，并根据每个瓷砖进行更改。我正在使用react来开发项目，下面是我设计的Experience.js和App.css。这是时间轴的当前外观:当前实现

App.css

.experience {
padding: 0 0 50px 0;
position: relative;
}
.experience-bx {
background: #151515;
border-radius: 75px;
text-align: center;
padding: 50px 50px;
margin-top: 10px;
}
.experience h2 {
color: #ffffff;
font-size: 45px;
font-weight: 700;
}
.experience p {
color: #B8B8B8;
color: #B8B8B8;
font-size: 18px;
letter-spacing: 0.8px;
line-height: 1.5em;
margin: 14px 0 75px 0;
}
@keyframes updown {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(-20px);
}
}
.txt-rotate > .wrap {
border-right: 0.08em solid #666;
}

Experience.js

import React from "react";
import { Chrono } from "react-chrono";
import 'animate.css';
import ithena from "../assets/img/ithena.png";
export const Experience =() => {
const items = [{
title: "Apr 2019 - Jun 2019",
cardTitle: "Student Intern",
cardSubtitle:"Dunkirk",
cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",

},
{
title: "Jun 2020 - Aug 2020",
cardTitle: "Full Stack Developer Intern",
cardSubtitle:"Dunkirk",
cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",

},
{
title: "Aug 2021 - Present",
cardTitle: "Student Assistant",
cardSubtitle:"Dunkirk",
cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",

},
{
title: "Aug 2022 - Present",
cardTitle: "Internal Secretary",
cardSubtitle:"Dunkirk",
cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",

},
];
return (
<section className="experience" id="experiences">
<div className="container">
<div className="row">
<div className="col-12">
<div className="experience-bx wow zoomIn">
<h2>{`Experience`}</h2>
<div style={{ width: '100%', height: 'auto' }}>
<Chrono items={items} mode="HORIZONTAL" cardPositionHorizontal="TOP"
theme={{
cardBgColor: '#151515',
cardForeColor: 'violet',
titleColor: '#B8B8B8',
titleColorActive: 'white',
secondary: 'linear-gradient(90.21deg, rgba(162, 96, 192, 0.5) -5.91%, rgba(55, 34, 146, 0.5) 111.58%)',
primary: '#7f4a97',

}}
cardHeight={250}
slideItemDuration={5000}
slideShow={true}
itemWidth={"300"}
borderLessCards={true}
buttonTexts={{
first: 'Jump to First',
last: 'Jump to Last',
next: 'Next',
previous: 'Previous',
}}
fontSizes={{
cardSubtitle: '1rem',
cardText: '1rem',
cardTitle: '1.5rem',
title: '1rem',
}}
/>

</div>
</div>
</div>
</div>
</div>
</section>
)
}

我已经尝试使用https://www.npmjs.com/package/react-chrono功能，并希望最终输出看起来像这样:时间轴的例子，我想要的第一部分我想要的时间轴的例子，第2部分可以在项目上方设置半透明图像。

Answer 1

为什么不将图像传递给react-chrono，例如:

{
title: "Jun 2020 - Aug 2020",
cardTitle: "Full Stack Developer Intern",
cardSubtitle:"Dunkirk",
cardDetailedText: "Men of the British Expeditionary Force (BEF) wade out to..",
media: {
name: "dunkirk beach",
source: {
url: "http://someurl/image.jpg"
},
type: "IMAGE"
}
}

然后调整它的样式，以接管整个宽度/高度?

反应时间的另一个选择是使用自定义卡片。您可以构建自己的项目，并仅为时间轴点传递项目数组。像这样，你可以给项目的其他元素一个位置，将它们放在顶部。(例如，图像获得绝对位置，获取所有卡片和其他具有更高z-index的项目在图像顶部)

:

<Chrono mode="HORIZONTAL" items={items}>
<div>
<p>Lorem Ipsum. Lorem Ipsum. Lorem Ipsum</p>
</div>
<div>
<img src="<url to  a nice image" />
</div>
</Chrono>;