Tại sao CSS3 căn phải hình ảnh nền xuất hiện ở vị trí sai?

Question

Tôi đang sử dụng vị trí nền CSS3 để định vị hình nền 3% từ cạnh phải của vùng chứa. Tuy nhiên nó xuất hiện ở một vị trí khác so với nếu tôi có một thùng chứa tương đương rộng 97% với hình nền được canh lề phải. Bạn có thể thấy ý tôi là gì ở số http://jsfiddle.net/deshg/9qveqdcu/2/, biểu tượng ở hàng màu đen ở phía bên phải hơn biểu tượng trong hàng màu xanh lá cây nhưng chắc chắn chúng phải ở cùng vị trí ngang?

Nếu có ai đó có thể làm sáng tỏ lý do tại sao điều này xảy ra, nó sẽ được đánh giá cao.

Để tham khảo, mã bên dưới.

Cảm ơn tất cả!

#container { 
width: 100%; 
background-color: #ffcc00; 
} 

#d1 { 
background-color: #cccc00; 
background-image: url('http://jsfiddle.net/img/logo.png'); 
background-position: right 3% center; 
background-repeat: no-repeat; 
width: 100%; 
} 

#d2 { 
background-color: #000000; 
color: #ffffff; 
background-image: url('http://jsfiddle.net/img/logo.png'); 
background-position: right center; 
background-repeat: no-repeat; 
width: 97%; 
margin-right: 3%; 
} 

<div id="container"> 
    <div id="d1"> 
     abvc 
    </div> 
    <div id="d2"> 
     def 
    </div> 
</div> 

Answer 1

Hình nền bản thân đang được bù đắp 3% chiều rộng riêng của nó

From the docs:

Tỷ lệ tham khảo các kích thước của vùng định vị nền trừ kích thước của hình nền ; kích thước đề cập đến chiều rộng cho offsets ngang và chiều cao cho offsets dọc

Dưới đây là một minh chứng khi sử dụng 25% 25% (from CSS Tricks):

Answer 2

vị trí nền không hoạt động như bạn nghĩ.

Nó khác với nếu bạn nói, đặt và định vị nó ở left: 50%; trong trường hợp đó, cạnh trái của hình ảnh sẽ ở điểm nửa chừng. Nếu bạn muốn căn giữa, bạn sẽ cần phải kéo nó trở lại sang trái (âm dịch hoặc biên độ âm)

Để hiểu rõ hơn tham khảo Link Và Link

Đối với những gì bạn đang cố gắng để đạt được bạn phải thiết lập

background-position: 96% 0px, center center; 

Fiddle