반응 형 레이아웃에서 CSS Sprite를 사용하는 방법은 무엇입니까?

내 문제를 중심으로하는 몇 가지 질문이 있지만 답장 중 아무 것도 내가하려는 일과 관련이 없습니다. 앵커 태그에 클래스를 사용하여 내 사이트 로고에 스프라이트를 사용하고 있습니다. 문제는 픽셀 높이와 너비를 정의해야하므로 로고가 반응하지 않는 것입니다. 여기 반응 형 레이아웃에서 CSS Sprite를 사용하는 방법은 무엇입니까?

는 HTML입니다 :

<a href="<?php echo get_option('home'); ?>/" class="logo-sprite"></a>

여기에 CSS가있다 :

a.logo-sprite { 
    background: url('image_here.jpg') 0 0; 
    display: block; 
    width: 450px; 
    height: 130px; 
} 

a.logo-sprite:hover { 
    background: url('image_here2.jpg') 0 -140px; 
}

어떤 생각? 감사.

출처

2012-11-26 johnnyg

그건 정말 큰 스프라이트 이미지입니다! 'background-scale '과 함께 사용하면 이미지/배경 이미지에'px'대신'em' 또는'%'를 사용할 수 있습니다. SVG 배경은 두 가지 다른 크기 조정 된 spritemap을 만드는 것보다 더 좋은 선택 일 수 있습니다. – cimmanon

맞아요. 스프라이트는 정의상 고정 된 차원에만 사용되므로 (결국 이미지 임) 유체/반응성 레이아웃에서 "부드럽게"사용할 수 없습니다.

미디어 쿼리에서 각 "수준"을 계속 조정하는 경우 반응 형 레이아웃에서 사용할 수 있습니다.

출처

2012-11-26 21:31:16

그래서 유일한/가장 좋은 옵션은 스타일 시트의 미디어 쿼리를 통해 수동 조정을 설정하는 것입니까? – johnnyg

@ user1485728 : 내가 아는 한, 그렇습니다. http://css-tricks.com에서 기사를 확인해야하며 때로는 토론 할 때 유용하다고 생각할만한 기사가있을 수도 있습니다. –

좋아, 나는 생각이있다.

background-size 속성을 사용하여 스프라이트를 제 위치에 "고정"하고 원하는 것보다 더 많이 표시하거나 더 적게 표시하지 않을 수 있습니다.

background-position: 0px 0px; 
background-repeat: no-repeat; 
background-size: 190% 140%;

여기에 유일한 문제는 높이가 동적으로 확장되지 않도록 이미지가 Div의 앵커와 같은 요소에 다른 크기를 조정한다는 것입니다 : 여기에 초보적인 예이다. 이를 달성하는 유일한 방법은 JavaScript를 사용하는 것이지만 잘못된 것일 수 있습니다. 브라우저의 크기를 조정하면 http://jsfiddle.net/VW2dW/16/ 당신이 성공적으로 문제가있는 수직이 아닌 수평으로 만 확장 알 수 있습니다 :

다음은 이런 일에 대해려고 시작하는 방법의 대략적인 예입니다.

출처

2012-11-26 21:41:28 Calvin

반응 형 레이아웃에서 CSS Sprite를 사용하는 방법은 무엇입니까?

답변

관련 문제