도구 소개
CSS 배경 생성기로 생성
이미지 위치, 크기, 반복 및 그라데이션 오버레이를 미리 보고 일치하는 CSS를 복사하세요.
로컬 이미지를 업로드하여 cover, contain, 위치, 반복 및 오버레이를 미리 봅니다. 게시된 자산 경로를 별도로 설정하세요. 생성된 CSS는 해당 경로를 사용하며 소스 파일을 포함하거나 업로드하지 않습니다.
CSS 배경 생성기
이미지 위치, 크기, 반복 및 그라데이션 오버레이를 미리 보고 일치하는 CSS를 복사하세요.
기기에서 처리 가입 불필요
로컬 개발자 도구
사용 방법
- 01
소스 준비
지원되는 소스 이미지를 선택하거나, 도구에서 제공하는 경우 텍스트 템플릿으로 시작하세요.
- 02
결과 조정
로컬 이미지를 업로드하여 cover, contain, 위치, 반복 및 오버레이를 미리 봅니다. 게시된 자산 경로를 별도로 설정하세요. 생성된 CSS는 해당 경로를 사용하며 소스 파일을 포함하거나 업로드하지 않습니다.
- 03
검토 및 다운로드
전체 미리보기와 출력 설정을 확인하세요. 완성된 에셋을 다운로드하고, 비교를 위해 원본을 유지하세요.
더 나은 결과를 위한 팁
- 로컬 미리보기는 선택한 파일을 사용합니다. 웹사이트에는 호스팅된 자산이나 프로젝트 내의 경로가 필요합니다. 이미지를 해당 위치에 업로드하거나 복사하고 CSS 경로가 스타일시트에서 올바르게 확인되는지 확인하세요.
- 결과물을 확인할 때까지 원본 파일을 보관하세요.
- 의도한 표시 크기에서 작은 텍스트와 미세한 가장자리를 검사하세요.
- 이미지 처리는 브라우저 내에서 이루어집니다. 탭을 닫기 전에 결과물을 다운로드하세요. 이 도구는 원본 파일을 덮어쓰지 않습니다.
자주 묻는 질문
CSS 배경 생성기 사용 방법은 무엇인가요? +
지원되는 소스 이미지를 선택하거나 도구에서 제공하는 텍스트 템플릿으로 시작하세요. 로컬 이미지를 업로드하여 cover, contain, 위치, 반복 및 오버레이를 미리 봅니다. 게시된 자산 경로를 별도로 설정하세요. 생성된 CSS는 해당 경로를 사용하며 소스 파일을 포함하거나 업로드하지 않습니다.
복사된 CSS에 이미지 경로가 필요한 이유는 무엇인가요? +
로컬 미리보기는 선택한 파일을 사용합니다. 웹사이트에는 호스팅된 자산이나 프로젝트 내의 경로가 필요합니다. 이미지를 해당 위치에 업로드하거나 복사하고 CSS 경로가 스타일시트에서 올바르게 확인되는지 확인하세요.
입력 파일은 어디에서 처리되나요? +
이미지 처리는 브라우저 내에서 이루어집니다. 탭을 닫기 전에 결과물을 다운로드하세요. 이 도구는 원본 파일을 덮어쓰지 않습니다.
어떤 파일을 사용할 수 있나요? +
허용되는 입력: JPG, PNG, WebP, AVIF, GIF. 사용 가능한 출력: TXT. 브라우저 디코딩 지원 및 선택한 출력 설정에 따라 처리 가능한 소스 파일이 결정됩니다.
계정이 필요한가요? +
이 도구는 계정이 필요하지 않습니다. 기기에 저장하기 전에 결과물을 검토할 수 있습니다.