Sprites CSS - sử dụng chỉ là một mảnh của một hình ảnh làm nền cho một phần của một phần tử

Question

tôi sử dụng CSS Sprite Technique với một hình ảnh nền mà trông giống như sau:

Mã CSS cho các biểu tượng :

div.icon { 
    background-color: transparent; 
    background-image: url("/images/icons.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    display: inline-block; 
    height: auto; 
    vertical-align: text-top; 
    width: auto; 
} 
div.icon:empty { 
    width:16px; 
    height:16px; 
} 
div.icon:not(:empty) { 
    padding-left:20px; 
} 
div.icon.attenuation { 
    background-position: 0 0; 
} 

biểu tượng của tôi có thể được sử dụng như thế này:

<div class="icon warning"></div> 

Tôi muốn đặt một số văn bản bên trong các biểu tượng của tôi như:

<div class="icon warning">There is a warning on this page</div> 

Nhưng vấn đề là hình nền bao gồm toàn bộ khu vực văn bản:

Câu hỏi đặt ra là: làm thế nào tôi có thể chỉ sử dụng một phần của hình ảnh làm hình nền cho phần tử của tôi?

Ghi chú:

• thiết width-16px cho div.icon không giúp.

Answer 1

Bạn có hai cách:

1) đánh dấu của bạn phải như thế này:

<div class="icon warning"></div><div class="txt">There is a warning on this page</div> 
.icon {width:10px(for ex.)} 

2) Bạn phải thay đổi thứ hình ảnh điện tử. Các biểu tượng trong hình ảnh phải nằm dưới một hình ảnh khác

Answer 2

Xin lỗi, câu trả lời trước của tôi không tốt lắm.

Chỉnh sửa: Nếu bạn có đệm 16px, bạn nên đặt chiều rộng là 0 chứ không phải 16px. Và tôi gặp khó khăn khi nhận bit :not(:empty) để hoạt động trên tất cả các trình duyệt; tốt hơn thoát khỏi nó. Vì vậy, CSS trở thành:

.icon { 
    ... 
    width:0; height:16px; padding-left:16px; 
} 
.icon:empty { 
    width:16px; padding-left:0; 
} 

jsFiddle

Answer 3

thiết width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; và loại bỏ padding

Answer 4

Hãy nhớ rằng, khi nào có thể, bạn không nên thay đổi đánh dấu của mình chỉ để đạt được thiết kế. Có thể sử dụng đánh dấu của bạn.

div.icon:before { 
    content: ""; 
    background-color: transparent; 
    background-image: url("/images/icons.png"); 
    display: inline-block; 
    height: 16px; 
    vertical-align: text-top; 
    width: 16px; 
} 

div.icon:not(:empty):before { 
    margin-right: 4px; 
} 

div.icon.attenuation { 
    background-position: 0 0; 
}