CSS 배경 배경 속성 사용에 대한 자세한 설명

배경은 CSS의 중요한 부분이자 알아야 할 CSS의 기본 지식 중 하나입니다. 이 기사에서는 다음을 포함하여 CSS 배경(Background)의 기본 사용법을 다룹니다. Background-attachment 및 기타 속성에 대해서는 CSS3의 뿐만 아니라 배경(Background)에 대한 일반적인 기술

도 소개합니다. 배경(4개의 새로운 배경 속성 포함).

배경색

배경색

속성을 사용하여 요소의 배경색을 설정할 수 있습니다. 이 속성은 모든 법적 색상 값을 허용합니다.

이 규칙은 요소의 배경을 회색으로 설정합니다.

p {background-color: gray;}

배경색이 요소의 텍스트에서 바깥쪽으로 덜 확장되도록 하려면 패딩을 추가하면 됩니다.

p {background-color: gray; padding: 20px;}

은 모든 요소 세트에 적용됩니다. em 및 a와 같은 인라인 요소까지 본문을 포함하는 배경색입니다.

배경색은 상속될 수 없으며 기본값은 투명입니다. 투명하다는 것은 "투명하다"는 뜻입니다. 즉, 요소가 배경색을 지정하지 않으면 배경이 투명해 상위 요소의 배경이 표시됩니다.

배경 이미지

이미지를 배경에 넣으려면 Background-image

속성을 사용해야 합니다. background-image 속성의 기본값은 none입니다. 이는 배경에 이미지가 배치되지 않음을 의미합니다.

배경 이미지를 설정해야 하는 경우 이 속성에 대한 URL 값을 설정해야 합니다.

body {background-image: url(/i/eg_bg_04.gif);}

대부분의 배경은 body 요소에 적용되지만 이에 국한되지는 않습니다.

아래 예에서는 문서의 나머지 부분에 배경을 적용하지 않고 단락에 배경을 적용합니다.

p.flower {background-image: url(/i/eg_bg_03.gif);}

인라인 요소에 대한 배경 이미지를 설정할 수도 있으며, 아래 예에서는 링크에 대한 배경 이미지를 설정합니다.

a.radio {background-image: url(/i/eg_bg_07.gif);}

이론적으로 텍스트 영역 및 선택 항목과 같은 대체 요소의 배경에 이미지를 적용하는 것도 가능하지만 모든 사용자 에이전트가 이를 잘 처리하는 것은 아닙니다.

또한 배경 이미지는 상속할 수 없습니다. 실제로 모든 배경 속성은 상속되지 않습니다.

배경 반복

페이지에 배경 이미지를 타일링해야 하는 경우 Background-repeat

속성을 사용할 수 있습니다.

repeat 속성 값을 사용하면 배경 이미지와 마찬가지로 이미지가 수평 및 수직으로 타일링됩니다. 반복-x 및 반복-y는 이미지가 각각 가로 또는 세로 방향으로만 반복되도록 하며, 반복 없음을 사용하면 이미지가 어떤 방향으로도 타일링되는 것을 허용하지 않습니다.

기본적으로 배경 이미지는 요소의 왼쪽 상단에서 시작됩니다. 아래 예를 참조하세요.

body
{ 
background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}

배경 위치 지정

배경 위치

속성을 사용하여 배경에서 이미지의 위치를 ​​변경할 수 있습니다.

다음 예에서는 배경 이미지를 body 요소 내 중심에 배치합니다.

body
{ 
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;background-position:center;}

background-position 속성에 값을 제공하는 방법에는 여러 가지가 있습니다. 먼저 사용할 수 있는 키워드는 위쪽, 아래쪽, 왼쪽, 오른쪽, 가운데입니다. 일반적으로 이러한 키워드는 쌍으로 표시되지만 항상 그런 것은 아닙니다. 100px 또는 5cm와 같은 길이 값을 사용할 수도 있고 마지막으로 백분율 값을 사용할 수도 있습니다. 값 유형에 따라 배경 이미지의 배치가 약간 다릅니다.

배경은

1. 배경(전경과 반대) [C]
2. 배경(사건 등), 원격 원인 [C][U]
3. 출신 배경(학력 포함) of) 경험 [C] [U]
4. 기초 [C]
5. 숨겨진 장소, 비하인드 [the S]
7. 녹음이나 라디오 방송 소음[U]
8. 배경음악[U]

위 내용은 CSS 배경 배경 속성 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!