Skip to main content

<AbsoluteFill>

一个辅助组件 - 它是一个绝对定位的 <div>，具有以下样式：

Styles of AbsoluteFill
ts
const style: React.CSSProperties = {
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: "100%",
  height: "100%",
  display: "flex",
  flexDirection: "column",
};
Styles of AbsoluteFill
ts
const style: React.CSSProperties = {
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  width: "100%",
  height: "100%",
  display: "flex",
  flexDirection: "column",
};

这个组件对于将内容层叠在一起非常有用。例如，您可以使用它来创建全屏视频背景：

Layer example
tsx
import { AbsoluteFill, OffthreadVideo } from "remotion";
 
const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <OffthreadVideo src="https://example.com/video.mp4" />
      </AbsoluteFill>
      <AbsoluteFill>
        <h1>This text is written on top!</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};
Layer example
tsx
import { AbsoluteFill, OffthreadVideo } from "remotion";
 
const MyComp = () => {
  return (
    <AbsoluteFill>
      <AbsoluteFill>
        <OffthreadVideo src="https://example.com/video.mp4" />
      </AbsoluteFill>
      <AbsoluteFill>
        <h1>This text is written on top!</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

最后渲染的图层会显示在最上面 - 这是因为 HTML 的工作原理。

添加引用​

您可以从版本 v3.2.13 开始为 <AbsoluteFill> 添加 React 引用。如果您使用 TypeScript，您需要将其类型化为 HTMLDivElement：

tsx
const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return <AbsoluteFill ref={ref}>{content}</AbsoluteFill>;
};
tsx
const MyComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  return <AbsoluteFill ref={ref}>{content}</AbsoluteFill>;
};

参见​