我试图设置一个gif作为背景,我得到它不工作:
在代码中,导入GridMatrix并从中提取src,然后使用video标签尝试全屏呈现它。
import React from 'react';
import GridMatrix from '../assets/gridMatrix.gif';
function Home() {
return (
<div>
<video
className="matrix-bg fixed top-0 left-0 w-full h-full z-[-1] object-cover"
autoPlay
loop
muted
>
<source
src={GridMatrix.src}
type="video/gif"
/>
</video>
<main className="container mx-auto py-10 px-4 flex flex-col items-center justify-center">
<h1 className="text-4xl font-bold mb-8 text-white text-center">
UNS Demo
</h1>
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
Login
</button>
</main>
</div>
);
}
export default Home;
1条答案
按热度按时间bnl4lu3b1#
GIF文件不是视频文件,其MIME类型为image/gif。
<video>
标记will not render them。您可以使用
<img src={GridMatrix.src} />
嵌入图像,或使用CSS将其设置为元素上的背景-* 图像 *。如今,网站经常嵌入他们所谓的“GIF”,这些GIF实际上是视频文件,但请注意,这些文件通常是
.webm
或.mp4
文件,两者都是视频格式,因此与<video>
兼容。