Có thể ẩn khu vực cụ thể của hình nền sprite CSS bằng clip không?

Question

Có thể ẩn khu vực cụ thể của CSSbackground image sử dụng clip không? ví dụ tôi có nhiều biểu tượng trên hình ảnh nhưng tôi muốn chỉ hiển thị một biểu tượng. Vì diện tích Div lớn hơn kích thước biểu tượng nên các biểu tượng không cần thiết khác cũng hiển thị. Tôi có thể ẩn chúng mà không tạo một hình ảnh khác cho biểu tượng duy nhất đó không?

Jsfiddle http://jsfiddle.net/jitendravyas/FyMW6/1/

Answer 1

Về cơ bản, bạn tạo vùng chứa cho mỗi hình ảnh mà bạn sử dụng để quyết định diện tích của hình ảnh.

http://jsfiddle.net/FyMW6/4/

HTML:

<div class="button"> 
    <div class="text">Lorem ipsum dolor sit amet</div> 
    <div id="house" class="icons"></div> 
</div> 

CSS:

.button {  
    width: 300px; 
    float: left; 
    border:1px solid red 
} 

.text { 
    float: left; 
    width: 245px; 
} 

.icons { 
    background-image: url("http://www.smtusa.com/uploads/cssexample.jpg"); 
    background-repeat: no-repeat; 

    width: 50px; 
    height: 50px; 
    float: right; 
} 

#house { 
    background-position: -56px -45px; 
} 

#gear { 
    background-position: -56px -106px; 
} 

Answer 2

Không, tôi không nghĩ như vậy, ít nhất là không trong CSS2.

Bạn không thể áp dụng thuộc tính clip cho hình nền.

CSS3 có thuộc tính background-clip dường như thực hiện chính xác những gì bạn cần. Nó đi kèm với hỗ trợ trình duyệt hạn chế vào lúc này, mặc dù. CSS có thuộc tính background-clip nhưng nó chỉ cho phép chỉ định khung giới hạn nào mà hình ảnh được hiển thị.

Có thể không có giải pháp nào cho việc này trừ khi sử dụng một vùng chứa khác cho biểu tượng.

Answer 3

Cách đơn giản nhất là để thiết lập các lớp để hiển thị: none;