배경 이미지 속성을 가진 응답 성 CSS 스프라이트

반응 형 스프라이트 이미지를 만드는 데 매우 유용한 도구를 찾았습니다. http://responsive-css.spritegen.com/배경 이미지 속성을 가진 응답 성 CSS 스프라이트

불행히도 스프라이트는 img 태그로 생성되어 자체 HTTP 요청을 생성합니다. 배경 이미지 속성을 사용하여 반응 형 CSS 스프라이트를 만드는 방법이 있습니까?

2014-03-26 xtomeek

예, data-url을 사용하십시오. 이미지 비트는 스타일 시트에 직접 삽입 할 수 있습니다. data-url을 이미지 태그의 src 속성에 포함시킬 수도 있습니다. 스타일 시트에서

, 그것은 다음과 같습니다 : 2x3이다 투명 PNG 이미지에 대한 데이터의 URL BG 이미지와

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACAQMAAACnuvRZAAAAA3NCSVQICAjb4U/gAAAABlBMVEUAAAD///+l2Z/dAAAAAnRSTlP/AOW3MEoAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzQGstOgAAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzA0LzE0Kb6O2wAAAAxJREFUCJljeMDwAAADhAHBgGgjpQAAAABJRU5ErkJggg==)

(단지 예를 - 그것은 작고).

데이터 URL을 사용하면 스프라이트가 쓸모 없게됩니다. 하나의 스프라이트 대신 여러 데이터 URL을 포함 할 수 있으며 추가 http 호출이 없습니다 (실제로는 보다 작은).

기존 이미지에서 쉽게 생성 할 수 있습니다. 다음은 온라인 도구입니다. http://dataurl.net/#dataurlmaker

출처

2014-03-26 09:11:38 Faust

브라우저에서 데이터를 계산합니까? image/png를 http 요청으로 사용 하시겠습니까? 크롬에서 데이터 요청이있는 목록에서 볼 수 있지만 처리/대기 시간을 확인할 수 없습니다. – xtomeek

data-url에 대한 http 요청을 * 만들지 * 않습니다. Chrome 개발자 도구는 네트워크 탭에이 도구를 표시하지만 해당 리소스에 대한 서버 왕복이 없습니다. – Faust

대단히 감사합니다. – xtomeek

배경 이미지 속성을 가진 응답 성 CSS 스프라이트

답변

관련 문제