product icon
문서
언어 선택
EnglishEspañolPortuguês do BrasilDeutschFrançaisעִבְרִית日本語ItalianoNederlandsРусскийTürkçeBahasa Indonesia简体中文繁體中文한국어العربيةSvenska

배경 설정하기

Last updated on 11/1/2024@mrbirddev

여기 slidde.co에서 배경을 설정하는 여러 가지 방법이 있습니다. CSS 배경은 slidde.co의 모든 요소에 설정할 수 있습니다.

CSS 배경

이것은 가장 일반적인 사용 사례입니다.

배경 이미지가 로딩 중이거나 배경 이미지의 일부가 투명할 때 대체 색상:

backgroundColor: #000

이미지 URL은 slidde.co를 사용하여 업로드할 수 있습니다. 여기서 CSS 그라데이션도 사용할 수 있으며, slidde.co는 코드 없이 사용할 수 있는 몇 가지 그라데이션 프리셋을 제공합니다:

backgroundImage: url("your_image_url")

대부분의 경우 배경이 모든 이미지를 덮도록 "cover"를 사용할 수 있습니다:

backgroundSize: cover

backgroundSize: "cover"가 이미지의 중요한 부분을 숨기는 경우, 위치를 조정할 수 있습니다:

backgroundPosition: 50% 10px

배경 이미지가 반복 가능한 패턴이 아닌 경우, 이를 no-repeat로 설정할 수 있습니다:

backgroundRepeat: no-repeat

페이지를 스크롤할 때 배경 이미지가 움직이는지 여부를 제어합니다. 일반적으로 페이지를 덮기 때문에 스크롤을 따르지 않는 정적인 사진이 필요합니다:

backgroundAttachment: fixed

더 깊이 있는 정보를 원하시면 MDN 문서를 확인하세요.

배경 애니메이션

CSS backgroundImage를 사용하는 경우, backgroundPosition을 쉽게 애니메이션할 수 있습니다. 예시를 참조하세요.

duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }

다른 CSS 속성도 애니메이션할 수 있습니다.

그러나 CSS opacity와 같은 것을 애니메이션해야 하는 경우, 직접적으로 애니메이션할 수 없습니다. opacity는 전체 요소에 적용되기 때문입니다. 대신 고급 배경에서 imageElement를 사용하고 target을 &>*:first-child로 설정하여 이미지 요소에만 적용해야 합니다.

고급 배경

이는 Page Slide Container에 적용됩니다. 고급 배경를 클릭하고 다음 옵션을 선택할 수 있습니다.

이미지 요소 배경 - 배경 이미지에 필터 설정

고급 배경를 클릭하고 imageElement를 선택합니다. 그러면 컨테이너 내부에 첫 번째 요소로 별도의 HTML <div><img /></div> 요소가 생성됩니다.

그런 다음 필터와 같은 CSS 속성을 적용할 수 있습니다. 예를 들어, 배경 이미지와 전경 텍스트 간의 대비를 높여 가독성을 향상시키는 세 가지 방법이 있습니다.

filter: grayscale(0.5)

filter: brightness(0.5)

filter: blur(5px)

더 깊이 있는 소개는 MDN 문서를 확인하세요.

애니메이션 배경

고급 배경를 클릭하고 animated를 선택합니다.

선택할 수 있는 다양한 애니메이션 배경 프리셋이 있습니다.

일반적으로 애니메이션 배경의 backgroundColor backgroundImage를 구성할 수 있습니다. 일부 프리셋에는 색상, 간격 또는 애니메이션 지속 시간을 구성할 수 있는 CSS 변수가 있습니다.

반복 가능한 패턴 배경

고급 배경를 클릭하고 pattern을 선택합니다.

  1. 패턴 유형을 선택합니다.
  2. 그런 다음 패턴의 옵션을 사용자 정의할 수 있습니다. 그리고 Inspire me 버튼을 클릭하여 무작위 패턴을 확인할 수 있습니다.

이렇게 하면 내부에 별도의 HTML <div><svg width="100%" height="100%" .../></div> 요소가 생성됩니다. 따라서 opacity, filter 또는 backgroundImage와 같은 CSS 속성을 조정하여 SVG 부모 요소에 그라데이션 배경을 추가할 수 있습니다. 또한 SVG를 애니메이션화할 수도 있습니다.

YouTube 비디오 배경

고급 배경를 클릭하고 youtubeElement를 선택합니다. 그러면 YouTube 비디오를 임베드하기 위해 별도의 HTML <div><iframe /></div> 요소가 생성됩니다. YouTube URL 링크를 거기에 붙여넣을 수 있습니다.

현재는 YouTube 요소만 허용됩니다. 이는 자체 비디오를 호스팅하는 것보다 더 나은 스트리밍 최적화를 제공하기 때문입니다. 사용자 지정 비디오 업로드가 필요하면 네비게이션 바의 피드백 버튼을 통해 알려주세요.

Loading...