görüntüyü sprite'dan alın ve bir href'e ekleyin

Question

Tüm simgelerimi bir hareketli grafiğe ekledim. Şimdi, bir bağlantıyla o hareketli grafikten bir simge göstermem gerekiyor. Hareketli çizgiyi eklediğimde ve arka plan konumunu bağlantıya ayarladığımda, bağlantının arka planının tamamı hareketli grafitedir.

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> 

Nasıl yalnızca bir simge gösterir böylece, birleşik resmin genişliğini ve yüksekliğini ayarlamak do?

"a" etiketine iki div eklemenin tek yolu var mı? İlk olarak, hareketli simge ve genişlik ve yükseklik ayarlı div ve diğer metinde?

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

Answer 1

Tam olarak bir simgesinin sağ boyutudur başka (sözde) elemana gerçek bir arka plan taşımak için :before veya :after kullanabilirsiniz. Böyle

şey:

.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 */ 
} 

Bir keman: http://jsfiddle.net/rudiedirkx/RG3Kd/ (yanlış boyutlarda, I kullanışlı iyi bir sprite yok çünkü).

Answer 2

Bunu yapamazsınız, sprite yaparken, elemanın genişliğinin ve yüksekliğinin ne kadar olacağını düşünmelisiniz.

"a" etiketine bir span eklediğinizde ve arka planı genişlik ve yükseklik ile eklediğinizde sorundan yararlanabilirsiniz. Veya hareketli grafiğinizi yeniden düzenleyebilirsiniz.

Answer 3

kullanın tarzındaki bu kodu:

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

    a span 
    { 
     background-color:#fff;    
     }  

sonra bu html:

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

[CSS ile Klip/Bitki background-image] (içinde