백그라운드 백분율에 대한 CSS 계산은 어떻게 작동합니까?

저는 현재 CSS 그래디언트와 위치를 가지고 놀고 있습니다. 저는 행운을 빌어 추측 할 수 있지만, 실제로 이것이 어떻게 작동하는지 이해하고 싶습니다.백그라운드 백분율에 대한 CSS 계산은 어떻게 작동합니까?

.serge_testDraw { 
    width: 10rem; 
    height: 10rem; 
    border: 0.2rem solid black; 
    background-image: 
     linear-gradient(to right, blue 0%, blue 100%) 
     , linear-gradient(to right, white 0%, white 100%) 
     , linear-gradient(to right, red 0%, red 100%) 
    ; 
    background-size: calc(100%/3) 100%; 
    background-repeat: no-repeat; 
    background-position: 0%, 50%, 100%; 
}

방법 배경 위치가 0 %, 50, 100 % 대신 0, 33.33 % (세 번째), 66.66 %로 올 (2 : 예를 들어

, 여기에 프랑스 국기 (메르)입니다 제삼)?

게다가 크기가 100 % 인 배경을 배치하는 방법을 알지 못합니다.

출처

2014-09-03 Serge Profafilecebook

흥미로운 점은 가운데 위치의 'background-position'은 어떤 값이든 상관 없지만 존재해야한다는 것입니다. http://jsfiddle.net/#&togetherjs=74v86sn02J –

마치 보이는 것처럼, 세 개의 배경 이미지가 정의되어 있기 때문에'background-position' 속성은 각 이미지의 초기 위치를 설정합니다.이 이미지는 각 "이미지"의 왼쪽 가장자리에 적용됩니다. 빨간색, 파란색 및 흰색 섹션 길이는 33 %입니다 –

이다. 전체 이미지의 위치를 지정합니다. 즉, 이미지 자체의 크기도 고려됩니다 (크기를 조정 한 후 background-size).

배경 위치 100% 100%은 right bottom과 유사하며 이미지의 오른쪽 하단이 배경 영역의 오른쪽 하단 모서리에 닿도록 이미지를 배치합니다. 마찬가지로 50% 50%은 배경 영역의 중간 점에 이미지의 중간 점을 배치하여 center center과 유사합니다.

사각형 프레임 내부를 직사각형 타일로 미끄러지는 것을 상상해보십시오. 왼쪽으로 이동하면 (즉, 100 %) 오른쪽 가장자리가 프레임의 오른쪽에 닿아 야합니다 (프레임을 에서까지 밀어 낼 수 없으므로). 아래쪽으로 이동하면 바닥이됩니다. 가장자리가 프레임의 바닥을 만집니다.

일반적으로 두 값이 백분율 인 모든 background-position: x y에 대해 이미지의 x 점은 배경 영역의 x 점과 정렬되고 이미지의 y 점은 배경의 y 점과 정렬됩니다 지역. 0 % 0 % ', 상단 :

CSS2.1'예를 들어

의 값 쌍,의 설명도 그래픽 예제가 어디 내가 대신 CSS3 Backgrounds and Borders을 인용 것이다 그래서 읽을 고통 ' 이미지의 왼쪽 모서리는 일반적으로 상자의 패딩 가장자리의 왼쪽 위 모서리와 정렬됩니다. '100 % 100 %'값 쌍은 이미지의 오른쪽 아래 모서리를 영역의 오른쪽 아래 모서리에 배치합니다.'75 % 50 % '의 값 쌍을 사용하면 이미지의 가로 75 %와 세로 50 %의 지점이 가로 75 %, 세로 50 %의 지점에 배치됩니다.

하지만 나 같은, 당신은 실시간으로이를 시각화에서 끔찍한 있다면, 단지 대신 슬라이딩 퍼즐 생각합니다.

절대 값에는 적용되지 않습니다. 절대 값은 이미지의 원점을 배치합니다. 그러나 절대 값을 오른쪽 및/또는 아래쪽에 고정하는 경우 참조 점을 변경할 수 있습니다. 예를 들어 right 10px bottom 10px은 배경 영역의 오른쪽 아래 모서리에서 10 픽셀 떨어진 배경 이미지를 배치합니다.

크기가 배경 영역의 100 % 인 위치에 배치하려는 경우 프레임에 완벽하게 맞는 타일을 이동할 수 없으므로 백분율을 사용할 수 없습니다 (우발적으로 가장 지루한 퍼즐이나 완벽한 장난을 만드십시오.) 이것은 배경 이미지의 본질적인 차원이 요소의 차원과 일치하는지 아니면 background-size: 100%을 명시 적으로 설정하는지에 관계없이 적용됩니다. 따라서 이미지의 위치를 지정하려면 절대 값을 사용해야합니다 (슬라이딩 퍼즐 유추를 모두 합치면됩니다).

출처

2014-09-03 16:14:07 BoltClock

background-position 속성은 센터의 위치를 설정합니다. 모든 배경의 너비가 calc(100%/3)이고 높이가 100% 인 것으로 지정한 경우 세 배경의 중심에 대해 x 위치를 지정했습니다 (y 위치의 기본값은 50 %).

출처

2014-09-03 15:36:06

어떻게 0 %가 중심을 나타낼 수 있습니까? 가장자리가 아닌가요? –

전체 플래그가 '600px'라고 가정 해 봅시다. 파란색, 흰색, 빨간색의 세 가지 배경이 있습니다. 다음으로 각 배경의 크기를 전체 너비 ('200 픽셀')의 1/3로 설정합니다. 이제 파란색 배경의 중심을 * 전체 플래그 *의 왼쪽에서 0 %로 설정합니다. 그래서 200px 넓이의 푸른 색 은색 깃발이 실제로 깃발의 가장자리에서 중간에 매달려 있습니다 ... 오른쪽의 100px 만 보여주고 있습니다. –

"그래서 200px 폭의 청색 은색 깃발이 실제로 깃발 가장자리에서 중간에 매달려 오른쪽에있는 100px 만 보이고 있습니다." 아니요, 그것이 사실이라면 왼쪽 정렬 된 모든 배경 이미지가 잘립니다. – BoltClock

우드 로우는 각 배경에 적용 할 배경 크기 규칙 때문에 각 배경이 플래그의 1/3을 차지하므로 첫 번째 배경의 시작점이라고 말했습니다.

두 번째로 다시 한 번 생각해 보면 이해하기 쉽지만 50 %가 센터의 50 % 이상이라고 생각하면 이것이 중간에 있고 컨테이너의 1/3을 차지하는 이유입니다. 원하는 경우 센터 대신 50 %를 사용할 수 있습니다.

여기 background-position 대한 퍼센트 값은 배경에 위치 결정 영역에 대한 배경 이미지의 원점 위치하지 mozilla's doc about background-position

출처

2014-09-03 15:43:22 AlexDom

백그라운드 백분율에 대한 CSS 계산은 어떻게 작동합니까?

답변

관련 문제