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

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

Barbara Streisand
Barbara Streisand원래의
2024-10-30 07:37:28234검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.