我正在開發我的網路作品集，并想在每張卡片（位置的壁紙）中添加背景，并且它會根據每個圖塊而變化。我正在使用 React 來開發專案，下面是我目前設計的 Experience.js 和 App.css。這是時間軸的當前外觀： Current implementation
App.css
/************ Experience 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功能并希望最終輸出看起來像這樣： 我想要的時間線示例第 1 部分 時間線示例我想要的第 2 部分 可能有半透明專案上的影像。
uj5u.com熱心網友回復：
為什么不將影像傳遞給 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"
}
}
然后用樣式調整它以接管整個寬度/高度？
react-chrono 的另一個選擇是使用自定義卡片。您可以構建自己的專案，并僅將專案陣列傳遞給時間軸點。像這樣你可以給專案的其他元素一個位置，將它們放在最上面。（例如，影像獲取所有卡片的絕對位置，以及影像頂部具有更高 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>;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/537117.html