집 > 기사 > 웹 프론트엔드 > HTML에서 이미지 배경을 설정하는 방법은 무엇입니까? 배경 속성 소개

HTML에서 이미지 배경을 설정하는 방법은 무엇입니까? 배경 속성 소개

웹 디자인에서는 때로는 웹 페이지를 아름답게 하기 위해 사진을 배경으로 사용해야 할 때가 있습니다. HTML은 이미지의 배경을 설정하는 다양한 방법을 제공합니다. 이 기사에서는 CSS의 background 속성을 사용하여 이미지의 배경을 설정하는 방법을 소개합니다.

1. 이미지 배경을 설정하려면 background-image 속성을 사용하세요.

background-image 속성은 요소의 배경 이미지를 설정하는 데 사용되며 하나 이상의 이미지 파일을 지정할 수 있으며 다른 배경 속성과 함께 사용할 수 있습니다.

구문은 다음과 같습니다.

background-image: url(path);

그 중 url()은 이미지의 경로를 지정하는데, 상대 경로 또는 절대 경로가 될 수 있습니다. 예를 들어 다음 코드는 이미지 배경을 설정합니다.

body {
  background-image: url(bg.jpg);
}

이 예에서는 bg.jpg 이미지가 전체 페이지의 배경으로 사용됩니다. HTML에서는 이 CSS 코드를 스타일 태그나 외부 CSS 파일에 배치한다는 점에 유의해야 합니다.

2. background-repeat 속성과 background-position 속성을 사용합니다.

일반적으로 이미지의 반복 방식과 위치도 설정해야 합니다. 이때 background-repeat 속성과 background-position 속성을 사용해야 합니다. .

background-repeat 속성은 배경 이미지의 반복 모드를 설정하는 데 사용됩니다. 다음 값을 사용할 수 있습니다.

예를 들어 다음 코드에서는 배경 이미지가 가로 방향으로만 반복되도록 설정합니다.

body {
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
}

background-position 속성은 배경 이미지의 시작 위치를 설정하는 데 사용됩니다. 값:

일반적으로 다음 방법을 사용하여 배경 위치 속성을 설정할 수 있습니다.

body {
  background-position: x-axis y-axis;
}

그 중 x축과 y축은 왼쪽과 위쪽으로부터의 오프셋을 나타냅니다(특정 값은 다음과 같은 단위를 사용할 수 있습니다). 픽셀 및 백분율) , 하나의 값만 설정된 경우 기본값은 가로 오프셋이고, 세로 오프셋은 기본적으로 중앙 정렬입니다.

예:

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

이 예에서는 배경 이미지가 반복되지 않고 가운데 상단부터 표시되도록 설정합니다.

3. background-size 속성을 사용하세요.

background-size 속성은 배경 이미지의 크기를 설정하는 데 사용됩니다. 다음 값을 사용할 수 있습니다.

예를 들어 다음 코드에서는 배경 이미지가 요소 영역에 완전히 맞도록 최대한 작게 설정됩니다.

body {
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

요약

배경 속성을 사용하면 요소의 배경 이미지를 쉽게 설정할 수 있습니다. 웹 페이지. 배경 이미지, 배경 반복, 배경 위치, 배경 크기의 4가지 속성을 통해 이미지의 경로, 반복 방식, 시작 위치, 크기를 설정할 수 있으므로 필요에 따라 유연하게 사용하시기 바랍니다.

위 내용은 HTML에서 이미지 배경을 설정하는 방법은 무엇입니까? 배경 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：