CSS를 사용하여 요소의 배경 이미지를 설정하는 데 사용되는 속성은 무엇입니까?

CSS에서 'Background-image' 속성은 CSS를 사용하여 요소의 배경 이미지를 설정하는 데 사용됩니다. 배경 이미지 속성에는 아래와 같이 4가지 속성이 있습니다.

• Url ()- 특정 위치에서 이미지를 가져와 배경으로 설정하려면 이미지 경로나 원격 URL이 필요합니다.

• None- 사용자는 배경 이미지 속성 값으로 none을 사용하여 배경을 제거할 수 있습니다.

• Initial- 초기 배경을 설정하며 대부분의 경우 배경이 없습니다.

• Inherited- 상위 요소와 동일한 배경 이미지를 설정합니다.

문법

사용자는 다음 구문에 따라 CSS에서 "배경 이미지" 속성을 사용할 수 있습니다.

으아악

위 구문에서 볼 수 있듯이 다양한 값을 사용하여 배경 이미지를 설정할 수 있습니다.

예 1

아래 예에서는 HTML div 요소를 만들고 CSS를 사용하여 높이와 너비를 지정했습니다. 추가적으로, 우리는 div 요소의 배경을 설정하기 위해 "배경 이미지" CSS 속성을 사용했습니다.

출력에서 사용자는 div 요소의 크기가 이미지보다 크면 배경 이미지를 반복적으로 설정하는 것을 관찰할 수 있습니다.

으아악

예 2

아래 예에서는 배경 이미지 값으로 "초기"를 사용합니다. 출력에서 사용자는 초기 배경이 아니기 때문에 div 요소에 대한 배경을 설정하지 않는다는 것을 확인할 수 있습니다.

으아악

예 3

아래 예에서는 그라디언트를 이미지와 함께 배경으로 설정했습니다. 출력에서 사용자는 그라데이션이 위에서 아래로 이루어지고 div 요소의 콘텐츠가 그라데이션 위에 있음을 확인할 수 있습니다.

으아악

예 4

아래 예에서는 두 개의 이미지를 div 요소의 배경으로 설정했습니다. 또한 이 두 요소에 대해 서로 다른 배경 위치를 설정했습니다. 출력에서 사용자는 한 이미지가 오른쪽 하단에 있고 다른 이미지가 왼쪽 상단에 있는 것을 관찰할 수 있습니다.

두 개의 배경 이미지를 함께 사용할 때마다 첫 번째 이미지가 두 번째 이미지 위에 나타납니다.

으아악

이 튜토리얼에서 사용자는 "배경 이미지" 속성을 사용하여 이미지의 배경을 설정하는 방법을 배웠습니다. 사용자는 또한 HTML 요소의 배경으로 그라데이션을 설정하는 방법을 배웠습니다. 사용자는 여러 이미지를 배경으로 사용할 수도 있으며, 이미지의 URL을 값으로 추가하면 배경 이미지도 스택이 생성된 순서와 동일하게 나타납니다.

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