Dlaczego obraz w tle wyrównany w CSS3 jest wyświetlany w niewłaściwym miejscu?

Question

Używam tła w tle CSS3, aby ustawić obraz tła 3% od prawej krawędzi kontenera. Wygląda jednak na inną pozycję w porównaniu do sytuacji, gdy mam równoważny pojemnik o szerokości 97% z wyrównanym do prawej tłem. Możesz zobaczyć, co mam na myśli w http://jsfiddle.net/deshg/9qveqdcu/2/, logo w czarnym rzędzie jest dalej w prawo niż w zielonym rzędzie, ale na pewno powinny być w tej samej pozycji poziomej?

Jeśli ktokolwiek mógłby rzucić trochę światła na to, dlaczego tak się dzieje, byłby bardzo ceniony.

Dla odniesienia kod jest poniżej.

Dzięki!

#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

Sam obraz tła jest przesunięcie 3% jego własnym szerokości

From the docs:

procentowe odnoszą się do wielkości obszaru pozycjonowania tła minus rozmiaru obrazu tła ; Wielkość oznacza szerokość poziomych przesunięcia oraz wysokości na pionowych przesunięć

Poniżej przedstawiono ilustrację przy użyciu 25% 25% (from CSS Tricks):

Answer 2

położenie tła nie pracuje kiedy myślisz.

To różni się, niż gdyby, powiedzmy, miał i umieścił go w left: 50%; w tym scenariuszu, lewa krawędź obrazu byłaby w połowie. Jeśli chcesz to centrum miasta, trzeba wyciągnąć go z powrotem w lewo (ujemna marża przetłumaczyć lub ujemna)

Dla lepszego zrozumienia odnoszą Link And Link

Za to, co staramy się osiągnąć trzeba ustawić

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

Fiddle