STYLE.BACKGROUND 속성 사용법

STYLE.BACKGROUND 속성은 요소의 배경 스타일을 지정하는 데 사용되는 CSS 속성입니다. 이 속성을 통해 배경 이미지, 배경색, 배경 반복, 배경 위치 등의 속성을 설정할 수 있습니다.

Background-image: URL 링크나 상대 경로를 통해 요소의 배경으로 이미지를 지정할 수 있습니다. 예는 다음과 같습니다.

element.style.backgroundImage = "url('image.jpg')";

Background-color: 요소의 배경색을 설정하는 데 사용됩니다. 미리 정의된 색상 이름이나 RGB 값을 사용하여 색상을 지정하거나 rgba() 함수를 사용하여 투명도를 설정할 수 있습니다. 다음은 예시입니다.

element.style.backgroundColor = "red";

Background-repeat: 배경 이미지의 반복 방식을 설정하는 데 사용됩니다. 반복(기본값, 배경 이미지가 반복적으로 표시됨), 반복-x(가로 방향으로 반복 표시), 반복-y(세로 방향으로 반복 표시) 및 no-repeat(반복 표시되지 않음)로 설정할 수 있습니다. 다음은 예시입니다.

element.style.backgroundRepeat = "no-repeat";

Background-position: 배경 이미지의 위치를 ​​설정하는 데 사용됩니다. 키워드(왼쪽, 중앙, 오른쪽, 위쪽, 아래쪽 등)나 특정 픽셀 값을 사용하여 지정할 수 있습니다. 다음은 예시입니다.

element.style.backgroundPosition = "center";

Background-attachment: 스크롤 시 배경 이미지의 이동 여부를 설정하는 데 사용됩니다. 스크롤(기본값, 스크롤 막대가 스크롤될 때 배경 이미지가 이동함) 또는 고정(배경 이미지가 페이지에 고정되어 스크롤 시 이동하지 않음)으로 설정할 수 있습니다. 다음은 예입니다.

element.style.backgroundAttachment = "fixed";

위는 STYLE.BACKGROUND 속성의 일부 사용 예입니다. background-size, background-clip, background-image 등과 같은 다른 속성도 있습니다. 자세히 살펴보고 사용해 보세요. 전반적으로 STYLE.BACKGROUND 속성은 효과에 도움이 될 수 있는 매우 유연하고 강력한 CSS 속성입니다.

위 내용은 STYLE.BACKGROUND 속성 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!