Frame에 백그라운드이미지와 텍스트를 함께 설정하고 싶습니다.

22.11.03 17:38 작성 조회수 245

0

export default function MyComponent(props) {
    return (
        <Frame
            position="relative"
            width={"100%"}
            height={100}
            style={{ fontSize: 16, fontWeight: 800, color: "black" }}
            background={{ src: props.image }}
        >
            {props.text}
        </Frame>
    )
}

이렇게 작성했는데, 이미지가 텍스트 위로 로드되어서 텍스트가 보이지 않습니다. 텍스트가 이미지 위로 로드되게 하려면 코드를 어떻게 작성해야 할까요?

course-thumbnail

프레이머를 활용하여 쉽고 간단하게 프로토타입 제작하기

Code Component

강의실 바로가기

답변 1

답변을 작성해보세요.

1

토마스님의 프로필

토마스

지식공유자

2022.11.04

안녕하세요, seonjukim님. 백그라운드 이미지 설정에 문제가 있으시군요.

<Frame> 에서는 이미지를 로드할 경우, 텍스트를 덮는 형태로 구현됩니다. 따라서 아래와 같이 2개의 <Frame>을 구현하게 되면 이미지 위로 텍스트가 로드됩니다.

import { Frame } from "framer"

export default function MyComponent(props) {
    return (
        <>
            <Frame
                position="absolute"
                width={"100%"}
                height={100}
                style={{ fontSize: 16, fontWeight: 800, color: "black" }}
                background={{
                    src: props.image,
                }}
            ></Frame>
            <Frame width={"100%"} height={100} background={"none"}>
                {props.text}
            </Frame>
        </>
    )
}

다만, 위와 같은 형태로 마크업을 하게되면 디자인이 복잡해질수록 코드가 배로 복잡해집니다. 프레이머의 최신 라이브러리인 <motion.div>를 사용하면 아래와 같은 문법으로 작성이 가능해요.

import { motion } from "framer-motion"

export default function MyComponent(props) {
    return (
        <motion.div
            style={{
                width: "100%",
                height: 100,
                fontSize: 16,
                fontWeight: 800,
                color: "black",
                position: "relative",
                backgroundImage: "url(" + props.image + ")"
            }}
        >
            {props.text}
        </motion.div>
    )
}

강의를 촬영한 것도 1년 이상 지나 그동안 프레이머가 많이 업데이트가 되었는데요. 빠른 시일 내에 새로운 버전의 프레이머 강의를 공유드리도록 할게요.

강의 봐주셔서 감사합니다. :)

이 글과 비슷한 Q&A