CSS 배경 대 배경 색상

태그를 사용하여 컨테이너를 만든 다음 제목과 단락을 추가합니다.

HTML

< div >

< h1 > 리눅스 힌트 < / h1 >

< 피 > 우리 웹사이트에 오신 것을 환영합니다 < / 피 >

< / div >

CSS에서는 div의 높이를 ' 100% '로 전체 페이지에 나타나게 하고 텍스트의 글꼴 크기를 ' xx-대형 '. 그런 다음 배경색을 ' 아쿠아 '.

CSS

div {

키 : 100% ;

글꼴 크기 : xx-대형 ;

배경색 : 아쿠아 ;

}

아래 제공된 이미지에서 배경색이 적용된 것을 볼 수 있습니다.

CSS 배경 이미지 속성

' 배경 이미지 ” 속성은 하나 이상의 이미지를 HTML 요소의 배경으로 설정하는 데 사용됩니다. 이 속성을 활용하여 다른 요소에 대해 다른 배경 이미지를 추가할 수 있습니다.

통사론

background-image 속성의 구문은 다음과 같습니다.

배경 이미지: url()

여기에 배경으로 설정하려는 이미지의 경로를 ' URL() '.

예시

이전 예에 이어 '에 배경 이미지를 추가하십시오. div ' 수업. 이미지의 URL을 ' url(img.jpg) ':

div {

...

배경 이미지 : URL ( img.jpg ) ;

}

아래 제공된 출력은 배경 이미지가 성공적으로 추가되었음을 나타냅니다.

이미지가 반복됩니다. 이 문제를 해결하려면 다음 속성을 확인하십시오.

CSS background-repeat 속성

웹 페이지에서 이미지를 배경으로 추가하면 기본적으로 반복됩니다. 이러한 반복을 방지하고 원하는 패턴을 설정하려면 ' 배경 반복 ' 속성이 활용됩니다.

통사론

background-repeat 속성의 구문은 다음과 같습니다.

배경 반복 : 반복하다 | 반복 x | 반복 | 반복 금지

background-repeat 속성의 명시된 값에 대한 설명은 다음과 같습니다.

• 반복하다: 이미지를 수직, 수평 양방향으로 반복하는데 활용합니다.
• 반복 x: 이미지의 반복을 가로로만 설정할 때 사용합니다.
• 반복-y: 이미지의 수직 반복을 지정합니다.
• 비반복: 이미지의 반복을 피하기 위해 사용됩니다.

예시

여기서 background-repeat 속성의 값을 ' 반복 금지 ':

div {

...

배경 반복 : 반복 금지 ;

}

위에서 제공한 코드의 결과는 아래와 같다. 이미지가 더 이상 반복되지 않는 것을 볼 수 있습니다.

CSS 배경 위치 속성

배경 이미지의 위치를 ​​설정하려면 ' 배경 위치 ' 속성이 사용됩니다. 왼쪽 상단, 왼쪽 중앙, 왼쪽 하단, 오른쪽 상단, 오른쪽 중앙 등과 같은 다양한 위치에서 이미지를 조정할 수 있습니다.

통사론

background-position 속성의 구문은 다음과 같습니다.

배경 위치 : 값

'대신에 값 ', 이미지의 위치를 ​​지정할 수 있습니다.

예시

여기서는 background-position을 ' 센터 ':

div {

...

배경 위치 : 센터 ;

}

아래 출력에서 ​​이미지가 페이지 중앙에 나타납니다.

CSS 배경 크기 속성

배경 이미지의 크기를 설정하려면 ' 배경 크기 ' 속성이 사용됩니다.

통사론

Background-size의 구문은 다음과 같습니다.

배경 크기 : 길이|표지

다음은 background-size 속성 값에 대한 설명입니다.

• 길이: 배경 이미지의 너비와 높이를 고정하는 데 사용됩니다.
• 씌우다: 전체 배경에서 배경 이미지를 조정할 때 활용합니다.

예시

배경 크기를 ' 100% ' 높이와 ' 80% ' 너비:

div {

...

배경 크기 : 100% 80% ;

}

지정된 치수에 따라 이미지 크기가 조정되었음을 알 수 있습니다.

CSS background-origin 속성

' 배경 출처 ” 속성은 배경 이미지의 위치 지정 영역을 조정하는 데 활용됩니다. 이미지는 기본적으로 왼쪽 상단 모서리에서 조정됩니다.

통사론

background-origin 속성의 구문은 다음과 같습니다.

배경 출처 : 패딩 상자| 테두리 상자 | 콘텐츠 상자

background-origin 속성의 값은 다음과 같습니다.

• 패딩 상자: 패딩 가장자리에 따라 배경 이미지의 위치를 ​​조정하는 데 사용되는 background-origin 속성의 기본값입니다.
• 테두리 상자: 이미지의 테두리 상자에 따라 이미지를 설정하는 데 사용됩니다.
• 콘텐츠 상자: 이미지의 내용에 따라 배경 이미지를 설정하는데 활용합니다.

메모: background-attachment 속성의 값을 '로 설정하면 background-origin 속성이 동작하지 않습니다. 결정된 '.

예시

먼저 컨테이너 주위에 테두리를 만듭니다. 여기에서는 이전 예제를 계속하고 패딩 값을 ' 10픽셀 '. 그런 다음 테두리 너비를 ' 15픽셀 ', 스타일 ' 산등성이 ', 그리고 '로 색상을 지정합니다. RGB(1, 68, 68) '. 결국 background-origin 속성 값을 ' 콘텐츠 상자 ':

div {

...

심 : 10픽셀 ;

국경 : 15픽셀 산등성이 RGB ( 1 , 68 , 68 ) ;

배경 출처 : 콘텐츠 상자 ;

}

위에서 제공한 코드의 결과는 아래와 같다. div의 내용에 따라 이미지의 위치가 설정된 것을 볼 수 있습니다.

CSS 배경 클립 속성

' 배경 클립 ' 속성은 요소의 배경색에서 작동합니다. 요소의 패딩, 테두리 및 내용과 같이 배경색이 요소를 넘어 얼마나 멀리 확장되는지 제어할 수 있습니다.

통사론

background-clip 속성의 구문은 다음과 같습니다.

배경 출처 : 테두리 상자 | 패딩 상자 | 콘텐츠 상자

background-origin 속성의 값은 다음과 같습니다.

• 테두리 상자: 테두리 뒤에 배경색을 설정하는 데 사용되는 background-origin 속성의 기본값입니다.
• 패딩 상자: 요소의 패딩 상자 내에서 색상을 조정하는 데 사용됩니다.
• 콘텐츠 상자: 요소의 내용에 따라 배경색을 설정할 때 사용합니다.

예시

이전 예제를 계속해서 테두리 스타일의 값을 ' 점이 찍힌 '를 참조하여 background-clip 속성을 이해하십시오. 그런 다음 background-clip 속성의 값을 ' 패딩 상자 ':

div {

...

배경 클립 : 패딩 상자 ;

}

출력은 테두리 가장자리가 끝나면 흰색 배경색이 표시됨을 나타냅니다.

CSS 배경 첨부 속성

' 배경 첨부 ” 속성은 페이지를 스크롤하는 동안 동작이나 이미지를 조정하는 데 사용됩니다. 그 동작은 다른 요소와 함께 스크롤하도록 설정되거나 고정될 수 있습니다.

통사론

background-attachment 속성의 구문은 다음과 같습니다.

배경 첨부 : 값

background-attachment 값을 ' 결정된 '를 사용하여 배경 이미지를 수정하거나 ' 스크롤 '를 눌러 페이지와 함께 이미지를 스크롤할 수 있습니다.

메모: 기본적으로 background-attachment 속성의 값은 ' 스크롤 '.

추가된 배경 이미지는 스크롤했을 때 정적이 아님을 알 수 있습니다. 이제 이 문제를 해결해 보겠습니다.

이를 위해 background-attachment 속성의 값을 ' 결정된 ':

div {

...

배경 첨부 : 결정된 ;

}

다음은 이미지가 수정되었음을 보여주는 결과입니다.

이제 background와 background-color 속성의 비교로 넘어갑니다.

CSS 배경 대 배경 색상

주어진 표는 기능을 기반으로 background 및 background-color 속성을 구별합니다.

특징	CSS 배경	CSS 배경색
유형	슈퍼 부동산입니다.	background 속성의 하위 속성입니다.
기능	모든 배경 속성을 설정합니다.	배경색만 설정합니다.
범위	모든 배경 속성을 지원합니다.	background-color 속성만 지원합니다.
수준	배경 값을 여러 개 추가해야 할 때 사용하기 쉽습니다. 모든 배경 속성의 값을 한 번에 설정할 수 있습니다.	하나의 배경색만 추가해야 할 때 활용할 수 있습니다.
통사론	배경: 값 (값은 bg-color, bg-image 및 기타 속성)	배경색: 색상

background-color 속성이 background 속성과 어떻게 다른지 설명했습니다.

결론

CSS ' 배경 '속성은 색상, 이미지, 위치, 크기, 원점 등 여러 배경 값을 한 번에 설정하는 데 사용되는 약식 속성입니다. 반면에, ' 배경색 '는 배경에 색상을 추가할 때만 사용됩니다. 이 가이드에서는 CSS background 속성과 CSS background-color 속성의 차이점에 대해 논의했습니다.