tải hình ảnh từ sprite và thêm vào a href

Question

Tôi đã thêm tất cả các biểu tượng của mình vào một ảnh. Bây giờ, tôi cần hiển thị một biểu tượng từ sprite đó với một liên kết. Khi tôi thêm sprite và thiết lập vị trí nền của nó trên liên kết tất cả các nền của liên kết là sprite sprite.

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> 

Làm thế nào để thiết lập chiều rộng và chiều cao của sprite, để nó chỉ hiển thị một biểu tượng?

Cách duy nhất để thêm hai div trong thẻ "a"? Đầu tiên, div với biểu tượng sprite và chiều rộng và chiều cao được thiết lập, và trong văn bản khác?

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

Answer 1

Bạn có thể sử dụng :before hoặc :after để di chuyển các nền thực tế khác (pseudo-) yếu tố đó là chính xác đúng kích cỡ của một biểu tượng.

Something như thế này:

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

Một fiddle: http://jsfiddle.net/rudiedirkx/RG3Kd/ (với kích thước sai, bởi vì tôi không có một sprite tốt tiện dụng).

Answer 2

Bạn không thể làm điều đó giống như, khi bạn đang làm sprites bạn nên có tâm bao nhiêu sẽ chiều rộng và chiều cao của phần tử sẽ được.

Bạn có thể thoát khỏi vấn đề khi bạn thêm một khoảng trong thẻ "a" và thêm backgroud vào nó, với chiều rộng và chiều cao cụ thể. Hoặc bạn có thể sắp xếp lại sprite của mình.

Answer 3

Sử dụng mã này trong phong cách:

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

    a span 
    { 
     background-color:#fff;    
     }  

sau đó html này:

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