CSS 배경 속성은 요소의 배경 효과를 정의하는 데 사용됩니다. HTML 요소에 영향을 미치는 CSS 배경 속성은 5가지가 있습니다.
- 배경색
- 배경 이미지
- 배경 반복
- 배경 첨부
- 배경 위치
이진 트리 중위 순회
1) CSS 배경색
background-color 속성은 요소의 배경색을 지정하는 데 사용됩니다.
배경색을 다음과 같이 설정할 수 있습니다.
h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p>지금 테스트해보세요
산출:
내 첫 CSS 페이지.
안녕하세요 자바포인트입니다. CSS 배경색의 예입니다.
2) CSS 배경 이미지
background-image 속성은 이미지를 요소의 배경으로 설정하는 데 사용됩니다. 기본적으로 이미지는 전체 요소를 덮습니다. 이와 같은 페이지의 배경 이미지를 설정할 수 있습니다.
.tostring 자바
body { background-image: url('paper1.webp'); margin-left:100px; }지금 테스트해보세요
4) CSS 배경 첨부
background-attachment 속성은 배경 이미지가 고정되는지 또는 브라우저 창에서 페이지의 나머지 부분과 함께 스크롤되는지를 지정하는 데 사용됩니다. 배경 이미지를 고정하도록 설정하면 브라우저에서 스크롤하는 동안 이미지가 움직이지 않습니다. 고정된 배경 이미지를 사용하는 예를 들어보겠습니다.
background: white url('bbb.webp'); background-repeat: no-repeat; background-attachment: fixed;지금 테스트해보세요
5) CSS 배경 위치
background-position 속성은 배경 이미지의 초기 위치를 정의하는 데 사용됩니다. 기본적으로 배경 이미지는 웹페이지의 왼쪽 상단에 배치됩니다.
다음 위치를 설정할 수 있습니다.
- 센터
- 맨 위
- 맨 아래
- 왼쪽
- 오른쪽
background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;지금 테스트해보세요