'50%'는'몇 px'

CSS의 백그라운드-position 속성에는 몇 가지 수치 지정 방법이 준비되어 있습니다. 그중의'% 지정 값'과'px 지정 값'을 서로 변환할 때의 계산 공식을 고려하십시오.

#sample { background-position: 50% 20px;}
　　　　　　　　　　　　　　　　 　↓　　↓
#sample { background-position: ??px ??%;}

이 계산에 필요한 정보는

배경 이미지의 요소를 지정하는 width/height(px값)

배경 그림의width/height(px값)

네.
저의 직언을 용서해 주십시오. 각자의 전환식은 아래와 같습니다.

% 지정 값 - px 지정 값의 변환식

수평 방향(X축)

{px指定値} = ( {背景画像を指定する要素のwidth} - {背景画像のwidth} ) * {%指定値} * 0.01

수직 방향(Y축)

{px指定値} = ( {背景画像を指定する要素のheight} - {背景画像のheight} ) * {%指定値} * 0.01

px 지정 값→% 지정 값의 변환식

수평 방향(X축)

{%指定値} = {px指定値} / ( {背景画像を指定する要素のwidth} - {背景画像のwidth} ) * 100

수직 방향(Y축)

{%指定値} = {px指定値} / ( {背景画像を指定する要素のheight} - {背景画像のheight} ) * 100

구체적 예

width의 경우 1000px<div id="sample">width 300px sample_bg.png 를 배경 그림으로 지정
수평방향(X축)의 백그라운드-position을 65%로 가정합니다.
A

#sample {
    width: 1000px;
    background: url(sample_bg.png) no-repeat 65% 0;
}

이런 상황에서'65%'의 부분을 px값으로 바꾸는 계산은 다음과 같다.

( {背景画像を指定する要素のwidth} - {背景画像のwidth} ) * {%指定値} * 0.01
= ( 1000 - 300 ) * 65 * 0.01
= 700 * 0.65
= 455

다음과 같은 경우를 지정해도 같은 위치에 배치sample_bg.png한다는 것이다.
B

#sample {
    width: 1000px;
    background: url(sample_bg.png) no-repeat 455px 0;
}

"width:100px""65%"메시지만 보면 "650px죠?"이렇게 생각하면 실제로 계산하면 전혀 다른 수치가 된다.

원래 백그라운드-position의'% 지정'이란?

background-position 속성에 대한'% 지정'은 참고 사이트 등에도 있습니다
"요소의 왼쪽 위 모서리에 있는 **% 위치"
이런 설명이 있었지만 애매한 표현이었다.background-position: 100% 100%로 지정할 경우
배경 이미지가 요소의 오른쪽 아래 바깥쪽으로 날아갔다고 하면 그런 일은 없다.
속성의 규격을 더 정확하게 표현하면 다음과 같은 설명이 되겠죠.

ある要素の水平方向（X軸）の background-position を "n%" と指定した場合、
その要素の水平方向 n% の座標が「基準点」となり、
背景画像は、その画像自体の水平方向 n% の座標が「基準点」と一致するように配置される。

（垂直方向の場合も同様）

이해가 안되네.
그림으로 표시해 주세요.

이 그림을 보면서 다시 계산하면 상술한'전환식'이 타당하다는 것을 알고 싶습니다.

{px指定値}
= 1000 * 65 * 0.01 - 300 * 65 * 0.01
= ( 1000 - 300 ) * 65 * 0.01
= 700 * 0.65
= 455