hình nền sprite đáp ứng, cách

Question

Xin chào Tôi có hai cột nội dung trong một vùng chứa, cột đầu tiên có văn bản và cột thứ hai là một khoảng có hình nền sprite. Vấn đề là khi tôi nhận được độ phân giải màn hình nhỏ hơn, tôi muốn hình nền sprite có chiều rộng theo tỷ lệ phần trăm để có thể mở rộng tỷ lệ phần trăm đó với H5 với độ rộng phần trăm, có cách nào để làm điều này không?

h5{ 
    float:left; 
    display:block; 
    width:800px; 
} 

.sprite{ 
    background-image: url("assets/img/website_sprite_a.png"); 
    background-position: -60px -60px; 
    float:left; 
    display:block; 
    width:64px; 
} 

<div class="container"> 
<h5>Title 
</h5> 
<span class="sprite"> 
</span> 
</div> 

Answer 1

Trong trường hợp của bạn tôi sẽ đi với một đơn background-image, nhưng trong trường hợp bạn sẽ có rất nhiều hình ảnh hoặc bạn thực sự muốn làm bạn này có thể sử dụng background-kích thước tài sản.

Từ MDN:

Thuộc tính CSS background-size chỉ định kích thước của hình ảnh nền. Kích thước của hình ảnh có thể bị ràng buộc hoàn toàn hoặc chỉ một phần để duy trì tỷ lệ nội tại của nó.

.sprite{ 
    background-image: url("assets/img/website_sprite_a.png"); 
    background-position: -30% -30%; //use % instead pixels 
    float:left; 
    display:block; 
    width:64px; 
    background-size: 100%; //play with this 
} 

Bạn cũng nên đọc:

• Scaling background images

Tôi đã chơi một chút với on JSFIddle này. Thay đổi kích thước trình duyệt để xem hiệu ứng.

Answer 2

gần một năm quá muộn, nhưng tôi đã cố gắng tìm ra điều tương tự và không thể tìm ra câu trả lời trực tiếp. Sau một chút lừa dối với nhiều lời khuyên, tôi đã tìm ra nó. Chưa có cơ hội để kiểm tra điều này trên IE8, và ngừng làm phiền với IE6/7, vì vậy hãy nhớ điều đó. Bí quyết mà tôi tìm thấy là sử dụng kết hợp vị trí nền (sử dụng tỷ lệ phần trăm - của hình ảnh sprite — như đã đề cập trước đó), phần đệm (một lần nữa, sử dụng tỷ lệ phần trăm — đây là tỷ lệ phần trăm của tổng chiều rộng của phần tử). hình ảnh sprite) và kích thước nền: bìa.

Chơi với nó tại jsfiddle.

#wrapper { 
    position: relative; 
    width: 100%; 
} 
.div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-image: url('http://upload.wikimedia.org/wikipedia/en/2/2e/Sprite_logo.jpg'); 
    background-repeat: no-repeat; 
    background-position: 0% 0%; 
    background-size: cover; 
    padding: 50% 0 0 0; 
    width: 40%; 
} 

<div id="wrapper"> 
    <div class="div"></div> 
</div>