배경 반복 (CSS 속성)

설명 배경 반복 속성은 백그라운드 이미지가 반복되는지 (타일) 반복되는지 여부를 제어하며, 반복되면 속성은 지정된 축 (x, y 또는 둘 다) 중 어느 것을 반복 해야하는지 정의합니다.

. 기본적으로 배경 이미지는 수직 및 수평 축 모두를 따라 반복되며 양방향으로 반복됩니다. 우리는 배경 반복 속성을 사용하여 이미지를 반복 해야하는 축을 지정합니다. 배경 이미지가 반복되면 먼저 배경 위치 속성에 따라 배치 된 다음 해당 지점에서 양방향으로 반복하기 시작합니다. 예를 들어, 센터 센터 (요소 중심)의 배경 위치에 배치되고 배경 반복 값이 반복되는 백그라운드 이미지는 X와 Y 축을 따라 양방향으로 반복됩니다. 요소의 배경은 해당 요소의 너비와 높이로 덮인 영역입니다 (해당 치수가 명시 적으로 설정되어 있는지 또는 내용이 지시되는지); 또한 패딩과 경계로 덮인 영역도 포함됩니다. 요소에 적용되는 배경색 (또는 배경 이미지)은 해당 요소의 전경 함량 아래에 나타나고 요소의 패딩 및 테두리 속성으로 덮여 있습니다. 이 커버리지 영역은 요소가 투명 (또는 점선 또는 점선) 테두리를 갖는 경우 분명하며, 바탕은 테두리 아래 (또는 점 사이) 아래에 나타납니다. 인터넷 익스플로러 버전은 최대 6 개를 포함하여 투명한 경계를 지원하지 않습니다.

배경 이미지를 보여 주려면 해당 요소의 일부 영역이 표시되어야합니다. 요소의 내용 또는 차원에 의해 정의 된대로 고유 한 높이가없는 경우 배경은 보이지 않습니다. 요소에 떠오르지 않은 어린이 만 포함 된 경우 (명확히 참조하십시오.) 요소의 높이가 0이므로 배경이 표시되지 않습니다. 인라인 요소에서 배경 이미지의 타일링 및 위치는 CSS2.1 사양에 정의되지 않지만 향후 버전으로 해결 될 수 있습니다. 예제

이 스타일 규칙은 id "example"이있는 요소에 할당 된 배경 이미지가 x 축을 따라 반복되도록합니다.

value

반복

값 반복은 요소의 배경이 완전히 덮여있을 때까지 배경 이미지가 양방향 (즉, 왼쪽 및 오른쪽 및 오른쪽 및 위쪽 및 두 축을 따라 반복되도록합니다. 반복 -x

값 반복 X는 배경 이미지가 x

축 (즉, 두 방향의 수평 축-레프트와 오른쪽)을 따라 반복되도록합니다. 요소의 배경이 그 축을 따라 완전히 덮여있을 때까지.

반복 Y 값 반복 Y는 요소의 배경이 해당 축을 따라 완전히 덮여있을 때까지 배경 이미지가

y

축 (즉, 양방향의 수직 축 (즉, 두 방향의 수직 축)을 따라 반복되도록합니다.

반복되지 않은

반복되지 않은 값은 배경 이미지가 어떤 방향으로도 반복되지 않으며, 이미지의 단일 인스턴스 만 배경 위치에 의해 지정된 좌표에 배치됩니다.

배경 위치가 지정되지 않은 경우 이미지는 요소의 기본 왼쪽 탑 위치 (0,0)에 배치됩니다. CSS 배경 반복 속성에 대한 자주 묻는 질문 (FAQ) CSS 배경 반복 속성에서 '반복 X'와 '반복'의 차이점은 무엇입니까?

'반복 X'및 '반복'값은 CSS 배경 반복 속성의 각각 수평 및 수직으로 배경 이미지의 반복을 제어하는 ​​데 사용됩니다. ‘반복 X’가 사용되면 배경 이미지는 수평으로 만 반복되어 왼쪽에서 오른쪽으로 연속 패턴을 만듭니다. 반면에 '반복'을 사용하면 배경 이미지가 수직으로만 반복되어 위에서 아래로 연속 패턴을 만듭니다. 이 속성은 배경 이미지 반복 방향을 제어하려는 경우 유용합니다.

CSS 배경 반복 속성에서 '반복되지 않은'값은 어떻게 작동합니까?

CSS 배경 반복 속성에서 '반복되지 않은'값은 배경 이미지를 한 번만 나타나지 않기를 원할 때 사용됩니다. 이 값이 설정되면 배경 이미지는 배경 위치 특성에 의해 지정된 위치에 배치되며 반복 또는 타일이 아닙니다. 이것은 반복없이 배경으로 사용하려는 단일 이미지를 가지고있을 때 특히 유용합니다.

CSS Background-Repeat 속성에서 여러 값을 사용할 수 있습니까?

예, CSS 배경 반복 속성에서 여러 값을 사용할 수 있습니다. 이것은 여러 배경 이미지로 작업 할 때 특히 유용합니다. 각 값을 쉼표로 분리하여 각 배경 이미지에 대해 다른 반복 값을 지정할 수 있습니다. 첫 번째 값은 첫 번째 배경 이미지, 두 번째 이미지에 대한 두 번째 값 등에 해당합니다. '공간'값은 CSS 배경 반복 속성에서 어떻게 작동합니까?

CSS 배경 반복 속성의 '공간'값은 배경 이미지를 양방향으로 타일하는 데 사용됩니다. 이미지는 균등하게 간격을두고 첫 번째와 마지막 이미지는 요소의 가장자리에 닿습니다. 사용 가능한 공간만으로도 이미지가 더 충분하지 않으면 이미지가 적합하도록 크기가 크게 높아집니다. 이것은 배경 이미지의 각 반복 사이에 일관된 공간을 유지하려는 경우 유용 할 수 있습니다.

CSS 배경 반복 속성의 '라운드'값은 무엇입니까?

CSS 배경 반복 속성의 '라운드'값은 클리핑없이 가능한 한 배경 이미지를 반복하는 데 사용됩니다. 이미지는 요소 내에서 전체 횟수를 반복 할 수 있도록 크기가 커지고 있습니다. 이것은 클리핑없이 전체 배경 이미지가 보이기를 원할 때 유용 할 수 있습니다.

'상속'값은 CSS 배경 반복 속성에서 어떻게 작동합니까? CSS 배경 반복 속성의 '상속'값은 요소가 부모 요소의 배경 재산을 상속하는 데 사용됩니다. 이것은 요소의 배경 이미지의 반복 값이 상위 요소의 반복 값과 동일하다는 것을 의미합니다.

Gradients와 함께 CSS 배경 반복 속성을 사용할 수 있습니까?

예, 그라디언트와 함께 CSS 배경 반복 속성을 사용할 수 있습니다. 그라디언트와 함께 사용될 때 배경 반복 속성은 지정된 값에 따라 구배 패턴을 반복합니다. 이는 반복적 인 그라디언트 효과를 만들 때 유용 할 수 있습니다.

'초기'값은 CSS 배경 반복 속성에서 어떻게 작동합니까?

CSS 배경 반복 속성의 '초기'값은 속성을 기본값으로 설정하는 데 사용됩니다. 이는 배경 이미지가 수평 및 수직으로 반복 될 것임을 의미합니다. 이는 배경 반복 속성의 기본 동작입니다.

CSS 배경 반복 속성에 대한 값을 지정하지 않으면 어떻게됩니까?

CSS 배경 반복 속성에 대한 값을 지정하지 않으면 기본값은 '반복'입니다. 이것은 배경 이미지가 수평 및 수직으로 반복 될 것임을 의미합니다.

배경 이미지의 반복을 한 방향으로 만 통제 할 수 있습니까?

예, 배경 이미지의 반복을 한 방향으로 만 제어 할 수 있습니다. '반복 X'값을 사용하여 이미지를 가로로 반복하거나 '반복'값을 반복하여 이미지를 수직으로 반복 할 수 있습니다. 배경 이미지로 수평 또는 수직 패턴을 만들 때 유용 할 수 있습니다.

위 내용은 배경 반복 (CSS 속성)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!