Lotties在我的NextJS项目中有黑色背景.如何使它们透明?

Question

我所有的LottieFiles (JSON)有一个黑色的背景，当我把它们导入到我的NextJS项目。我尝试在播放器或父div上设置background='transparent'，但无济于事。

我确保直接从Lottie编辑器导出具有透明背景的Lottie。

<HeroAnimation>
<Player
autoplay
loop
src={HeroTextAnimation}
background='transparent'>
<Controls visible={false} />
</Player>
</HeroAnimation>

注意:HeroAnimation标签是一个样式化的组件div——见下文:

const HeroAnimation = styled.div`
height: 554px;
`;

包。json依赖性:

"dependencies": {
"@chakra-ui/icons": "^2.0.15",
"@lottiefiles/react-lottie-player": "^3.5.0",
"@next/font": "13.1.1",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"styled-components": "^5.3.6"
}

尝试其他库(例如lottie-react)，看看它是否是库相关的问题。当前使用"@lottiefiles/react-lottie-player">

Answer 1

如果您的库在DOM中将Lottie呈现为SVG，则可以使用CSS选择器来更改SVG路径/形状的颜色。

Answer 2

全局css为每个元素添加了黑色背景——我删除了它，它就工作了。