Base64 인코딩을 사용하여 CSS 스타일시트에 PNG 이미지를 포함하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Base64 인코딩을 사용하여 CSS 스타일시트에 PNG 이미지를 포함하는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-10-30 07:37:28

원래의

315명이 탐색했습니다.

How to Embed PNG Images in CSS Stylesheets Using Base64 Encoding?

Base64 인코딩을 사용하여 CSS 스타일시트에 PNG 이미지 삽입

데이터 URI를 사용하여 CSS 스타일시트에 PNG 이미지를 포함하려면 해당 이미지를 다음으로 변환해야 합니다. Base64 인코딩. 이를 달성하는 방법은 다음과 같습니다.

macOS 및 Linux에서는 다음 명령줄 방법을 사용할 수 있습니다.

base64 filepath > filepath.b64

로그인 후 복사

또는 Python을 사용하여 보다 다양한 접근 방식을 사용할 수 있습니다.

<code class="python">import base64

binary_fc = open(filepath, 'rb').read()
base64_utf8_str = base64.b64encode(binary_fc).decode('utf-8')

ext = filepath.split('.')[-1]
dataurl = f'data:image/{ext};base64,{base64_utf8_str}'</code>

로그인 후 복사

이 Python 솔루션에서 디코드('utf-8')는 최신 브라우저와의 호환성을 보장하며 접두사 data:image/{ext};base64는 이미지 형식 및 인코딩을 식별하는 데 필수적입니다.

위 내용은 Base64 인코딩을 사용하여 CSS 스타일시트에 PNG 이미지를 포함하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!