배경 위치가 표시되지 않습니다

Question

나는 다음과 같은 CSS를 가지고 :

.flag 
{ 

    background-image: url('http://192.168.1.88/david/images/flag_set/flag_set/europa_flag_set.jpg'); 
    width: calc(4 * 5.93px); 
    height: calc(4 * 3.99px); 
    background-size: calc(4 * 35.08px) calc(4 * 49.63px); 
    cursor:pointer; 

} 
.flag.portugal 
{ 
    float: left; 
    background-position: calc(4 * -14.62px) calc(4 * -30.42px); 
} 
.flag.reinoUnido 
{ 
    float: right; 
    background-position: calc(4 * -21.40px) calc(4 * -40.22px); 
} 

그리고 해당 HTML을 :

가 잘 작동하지만 내 안드로이드 태블릿에서 내 노트북에서

<div class="flag contentor"> 
    <div class="flag portugal" onclick="$('.lang').removeClass('mostra');$('.lang.portugal').addClass('mostra');"></div> 
<div class="flag reinoUnido" onclick="$('.lang').removeClass('mostra');$('.lang.reinoUnido').addClass('mostra');"></div> 
</div> 

그 두 개의 흰색 사각형 만 보여줍니다.

배경을 잘못 배치하고 있습니까? 태블릿 브라우저와 호환되지 않습니까?

그리고 내가이 된 div에 표시 할 필요는 포르투갈 플래그와 같은 영국 플래그은 다음과 같습니다 :

내가 사용하고있는 이미지입니다

이 문제를 해결하는 데 사용할 수있는 폴리 필/심이 있습니까?

Answer 1

calc()은 다른 측정 값을 계산하기위한 것입니다 (예 : 100% - 24px, 15em * 14% 등). 정확한 측정 값이 있으므로 계산할 필요가 없습니다. 어쩌면 그게 문제 야. 나는 당신의 배경 이미지 문장이 당신의 코드에서 괜찮다고 생각한다. 그러나 픽셀 크기에서 2 자리 소수를 설정하는 이유가 무엇인지 알지 못합니다. 저에게는 의미가없는 것 같습니다.

.flag 
{ 
    background-image: url('http://192.168.1.88/david/images/flag_set'); 
    width: 23.72px; 
    height: 15.96px; 
    background-size: 140.32px 198.52px; 
    cursor:pointer; 

} 
.flag.portugal 
{ 
    float: left; 
    background-position: -58.48px -121.68px; 
} 
.flag.reinoUnido 
{ 
    float: right; 
    background-position: -85.6px -160.88px; 
}