프런트엔드 개발 과정에서 페이지 미관을 위해 HTML 페이지에 배경 이미지가 추가되는 경우가 많습니다. 그렇다면 CSS를 사용하여 이미지를 html의 배경으로 설정하는 방법은 무엇입니까? 이 글에서는 CSS에서 배경 이미지를 설정하는 방법을 소개하겠습니다. 필요한 친구들이 참고해서 배워두면 도움이 될 것입니다.
1. 배경개요
CSS는 배경색과 배경 이미지는 물론 이미지 설정도 추가할 수 있습니다.
CSS 배경 속성은 배경을 구체적으로 설정하는 속성입니다. 배경색이나 배경 이미지를 설정할 수 있습니다.
2. 속성
1. 배경색
(1) 정의 및 사용법: background-color 속성은 요소의 배경색을 설정합니다.
(2) 요소 배경의 범위
background-color 속성은 요소의 단색을 설정합니다. 이 색상은 요소의 콘텐츠, 안쪽 여백 및 테두리 영역을 채우며 요소 테두리의 외부 경계까지 확장됩니다(여백은 아님). 테두리에 투명한 부분(예: 점선 테두리)이 있는 경우 배경색은 이러한 투명한 부분을 통해 표시됩니다.
(3) 투명한 가치
대부분의 경우 투명을 사용할 필요는 없습니다. 그러나 요소에 배경색을 지정하지 않고 사용자의 브라우저 색상 설정이 디자인에 영향을 주지 않도록 하려면 여전히 투명 값을 설정해야 합니다.
요소의 배경색을 설정하려면 background-color를 사용하세요.
<!DOCTYPEhtml><html><head><title>CSS 배경</title><style>#bg{color:white;Background-color:blue;margin:20px;/*외부 여백을 20px로 설정*/padding : 20 px;/*패딩을 20px로 설정*/border:10pxdottedyellow;/*10px 너비의 노란색 점선 테두리 설정*/}</style></head><body><pid=bg>배경색 속성</p ></body></html>표시 결과는 다음과 같습니다.
실행 결과에서 background-color 속성이 요소의 단색 배경을 설정할 수 있음을 알 수 있습니다. 이 색상은 요소의 내용, 패딩 및 테두리 영역을 채울 것입니다(테두리 및 테두리로 이해될 수도 있음). 그 안의 모든 영역) 요소의 경우 테두리 외부 영역(여백)은 효과가 없습니다.
2. background-image는 배경 이미지를 설정합니다.
배경 이미지:url(imgs/main_bg.jpg),
속성이 CSS 파일에 설정되어 있고 이미지가 CSS 폴더에 없으면 앞에 경로를 추가하여 이전 폴더로 돌아갑니다.../
(1) background-image 속성은 요소의 배경 이미지를 설정합니다.
(2) 요소의 배경은 패딩과 테두리를 포함하여 요소의 전체 크기를 차지하지만 여백은 차지하지 않습니다.
(3) 기본적으로 배경 이미지는 요소의 왼쪽 상단에 위치하며 가로, 세로로 반복됩니다.
(4) url('URL'): 이미지를 가리키는 경로입니다.
팁: 배경 이미지를 사용할 수 없는 경우 페이지가 보기 좋게 보이도록 사용 가능한 배경색을 설정합니다.
3. background-repeat 배경 이미지 반복
기본적으로 배경 이미지는 전체 페이지를 덮습니다. 배경 이미지가 전체 페이지를 덮을 만큼 크지 않으면 배경 이미지가 가로좌표와 세로좌표에서 반복됩니다.
4. background-size는 배경 이미지의 크기를 설정합니다.
5. background-position은 배경 이미지 위치를 설정합니다.
기본값: 왼쪽, 아래쪽, 오른쪽, 위쪽, 중앙(중앙)
참고: background-position: 10px과 같은 숫자 값이나 백분율을 사용할 수도 있습니다. 10px는 왼쪽 및 위쪽 테두리에서 가로 및 세로 좌표까지의 거리를 나타냅니다.
6. 배경 첨부가 고정으로 설정되어 있나요?
7.배경-원산지
background-origin은 CSS3의 새로운 속성입니다. background-position 속성을 사용하여 배경 이미지의 위치를 설정할 때 기본적으로 요소의 왼쪽 상단 위치가 계산됩니다. background-origin 속성을 사용하여 background-position 속성의 상대 위치를 설정하여 배경 이미지를 배치할 수도 있습니다. background-origin 속성의 선택적 값은 다음과 같습니다.
8. 배경 클립
background-clip은 CSS3의 새로운 속성으로, 배경 이미지의 표시 영역을 설정할 수 있습니다. background-clip 속성의 선택적 값은 다음과 같습니다.
참고: 배경 반투명이란 상자의 배경이 반투명하고 상자 내부의 내용이 영향을 받지 않는다는 것을 의미합니다.
9. 배경
background는 background attribute의 약어입니다. 이를 통해 요소에 특정 배경 속성을 설정할 수 있을 뿐만 아니라 동시에 여러 또는 모든 배경 속성을 설정할 수도 있습니다. 여러 배경 속성을 설정할 때 정해진 순서는 없지만 다음 순서를 사용하는 것이 좋습니다.
배경 색상||배경 이미지||배경 위치[/배경 크기]?||배경 반복||배경 첨부||배경 원본||배경 클립
참고: 배경 이미지와 img 속성의 차이점은 다음과 같습니다.
(1) img 요소는 HTML 개념에 속하며, 배경 이미지는 CSS 개념에 속합니다.
(2) 이미지가 웹 콘텐츠에 속할 경우 img 요소를 사용해야 합니다.
(3) 페이지를 아름답게 하기 위한 목적으로만 이미지를 사용하는 경우, 배경 이미지를 반드시 사용해야 합니다.