웹 문서의 배경 이미지를 반복하는 방법은 무엇입니까?

웹 문서의 배경 이미지를 반복하는 방법은 다음과 같습니다. 1. 반복 없음, 반복 없음 2. 배경 이미지가 수직 및 수평으로 반복, 반복 3. 수평으로 반복, 반복-x 4. 수직으로 반복; 수평으로 반복-y.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

배경 이미지의 반복 방법에는 "반복 없음", "반복", "가로 반복", "가로 및 세로 반복"이 있습니다.

Syntax

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: no-repeat;

아마도 가장 일반적으로 사용되는 것은 위의 내용일 것입니다. 다른 두 속성 값을 살펴보겠습니다.

background-repeat: space;
background-repeat: round;

기본적으로 반복되는 이미지는 요소의 크기에 맞게 잘리지만 크기를 조정할 수 있습니다(다음을 사용). 원형) 또는 균일하게 분산됩니다(공간 사용).

round : 허용된 공간의 크기가 커지면 이미지를 추가할 공간이 충분할 때까지 반복되는 이미지가 공백 없이 늘어납니다. 다음 이미지가 추가되면 현재 이미지가 모두 압축되어 공간을 만듭니다.

space: 이미지는 최대한 반복되지만, 첫 번째 이미지와 마지막 이미지는 요소의 해당 측면에 고정되고, 이미지 배경 사이에 공백이 고르게 분포됩니다. 자르기 없이 하나의 이미지만 표시할 수 없으면 위치 속성은 무시됩니다. 자르기가 발생하는 유일한 시간은 이미지가 너무 크고 전체 이미지를 표시할 공간이 충분하지 않은 경우입니다.

이중 값 구문

background-repeat: repeat space;
background-repeat: round space;
background-repeat: no-repeat round;

작성 방법은 평소와 동일합니다. 가로 |

추천 학습: css 비디오 튜토리얼

위 내용은 웹 문서의 배경 이미지를 반복하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!