[英]Lotties have a black background in my NextJS project. How can I make them transparent?
All my LottieFiles (JSON) have a black background when I import them onto my NextJS project.当我将它们导入我的 NextJS 项目时,我所有的 LottieFiles (JSON) 都有黑色背景。 I tried setting
background='transparent'
on both the Player or the parent div, to no avail.我尝试在 Player 或父 div 上设置
background='transparent'
,但无济于事。
I made sure to export my Lotties with a transparent background directly from the Lottie editor.我确保直接从 Lottie 编辑器导出具有透明背景的 Lotties。
<HeroAnimation>
<Player
autoplay
loop
src={HeroTextAnimation}
background='transparent'>
<Controls visible={false} />
</Player>
</HeroAnimation>
Note: HeroAnimation tag is a styled component div -- see below:注意:HeroAnimation 标签是一个带样式的组件 div——见下文:
const HeroAnimation = styled.div`
height: 554px;
`;
package.json dependencies: package.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"
}
Tried other libraries (ie lottie-react) to see if it was a library-dependent issue.尝试了其他库(即 lottie-react)以查看它是否是库相关的问题。 Currently using "@lottiefiles/react-lottie-player"
目前正在使用“@lottiefiles/react-lottie-player”
If your library renders the Lottie to SVG in the DOM you can use a CSS selector to change the color of the SVG path/shape.如果您的库在 DOM 中将 Lottie 渲染为 SVG,您可以使用 CSS 选择器来更改 SVG 路径/形状的颜色。
Global css was adding a black background to every element -- I removed it and it worked. Global css 为每个元素添加了黑色背景——我删除了它并且它起作用了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.