배경 CSS 스프라이트 이미지 너비 설정

Question

배경 CSS 스프라이트 이미지 너비를 설정하는 방법이 있습니까? 나는 배경 아이콘 CSS 스프라이트를 사용하고 있기 때문에

<a href="#">shop</a> 

a{ 
    background-image: url(http://placehold.it/60x60/ff0000/000&amp;text=100)!important; 

    background-repeat: no-repeat; 
    display: block;  
    background-position: -5px -5px; 
    padding: 0 0 0 30px; 
} 

https://jsfiddle.net/jb1prcro/

는 지금 위의 a 태그는 60 픽셀 폭 단어 '가게', 30 픽셀의 패딩 30 픽셀은 카트 아이콘을 를 남겨 지금은 보여주고 자하는 30px 대신 그 배경 이미지의 60px를 보여줍니다.

이 A 태그의 배경 크기 : 30px 30px도 시도했지만 작동하지 않습니다.

당신은 의사 요소 before 사용할 수 있습니다

Answer 1

:

a{ 
    display: inline-block;  
    background-position: -5px -5px; 
    padding: 0 0 0 30px; 
    height:30px; 
    vertical-align:middle; 
} 
a:before { 
    background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important; 
    background-repeat: no-repeat; 
    width:30px; 
    height:30px; 
    display:inline-block; 
    content:''; 
    vertical-align:middle; 
} 

근무 예 :

: 여기 https://jsfiddle.net/mspinks/jb1prcro/2/

Answer 2

당신이 달성하기 위해 노력하고 정확하게 확실하지 않다,하지만 실용적인 예제 https://jsfiddle.net/ozL0yzuy/

a { 
    background-image: url(http://placehold.it/60x60/ff0000/000&text=100)!important; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 40px; 
    background-position: -10px -20px; 
} 

요소 자체에 대한 넓이 (실제로는 높이가 아닌 높이)를 설정해야합니다 (이 경우 a 태그는 블록 또는 인라인 블록 요소 인 경우에만 수행 할 수 있습니다).). 그런 다음 그에 따라 배경 위치를 조정할 수 있습니다.