스프라이트에서 이미지를 가져와 href에 추가

모든 아이콘을 스프라이트에 추가했습니다. 이제 링크를 통해 해당 스프라이트의 아이콘 하나를 표시해야합니다. 스프라이트를 추가하고 링크에서 배경 위치를 설정하면 링크의 모든 배경이 스프라이트 스프라이트가됩니다. enter image description here 스프라이트에서 이미지를 가져와 href에 추가

a{ 
    background-image:url('sprite.png'); 
} 
.sprite_link_icon{ 
    padding-left: 20px; 
    background-position: -36px -10px 
} 
<a class="sprite_link_icon" href="">test link test</a>

방법은 단 하나 개의 아이콘이 표시되도록 내가, 스프라이트의 너비와 높이를 설정합니까?

"a"태그에 두 개의 div를 추가하는 유일한 방법은 무엇입니까? 먼저 스프라이트 아이콘과 폭과 높이가 설정된 div와 다른 텍스트는?

<a href=""> 
    <div class="sprite_link_icon" style="width: 10px; height: 10px;"></div> 
    <div>test link</div> 
</a>

출처

2013-05-06 lolalola

가능한 중복 http://stackoverflow.com/questions/7777159/clip-crop-background-image-with-css) – Antony

올바른 대답을! – Rudie

당신은 정확히 하나 개의 아이콘의 오른쪽 크기가 다른 (사이비) 요소에 실제 배경을 이동 :before 또는 :after를 사용할 수 있습니다. 이 같은

뭔가 :

.icon { 
    /* nothing special here, just a dynamic element, 
    maybe with a fixed height? */ 
} 
.icon:before { 
    content: ''; 
    display: inline-block; 
    height: 16px; 
    width: 16px; 
    background: url(...) etc; 
    margin-right: .25em; /* might not be necessary due to inline-block */ 
}

바이올린 : http://jsfiddle.net/rudiedirkx/RG3Kd/ (잘못된 크기와 내가 편리 좋은 스프라이트이 없기 때문에).

출처

2013-05-06 18:46:00 Rudie

나는 정답이다. 추가 HTML은 없으며 IE7로 돌아가서 스프라이트 크기를 변경해야하는 경우 쉽게 재구성 할 수 있습니다. –

스프라이트를 할 때 요소의 너비와 높이가 얼마나 될지 염두에 두어야합니다.

"a"태그에 스팬을 추가하고 특정 너비와 높이로 그 배경 무늬를 추가 할 때 문제가 없어 질 수 있습니다. 또는 스프라이트를 재정렬 할 수 있습니다.

출처

2013-05-06 18:49:12 drip

사용 스타일이 코드 :

a 
    { 
     background-color:#00cc00; 
     padding-left:20px; 
     } 

    a span 
    { 
     background-color:#fff;    
     }

다음이 HTML :

<a href="#"><span>test link</span></a>

[CSS 클립/자르기 배경 이미지 (의

출처

2013-05-06 19:03:30 Ehsan

스프라이트에서 이미지를 가져와 href에 추가

답변

관련 문제