CSS 배경을 설정하는 방법

CSS를 사용하면 단색을 배경으로 적용할 수 있으며 배경 이미지를 사용하여 상당히 복잡한 효과를 만들 수도 있습니다.

CSS는 이 점에서 HTML보다 훨씬 더 뛰어납니다. (추천학습: CSS 기본 튜토리얼)

Background color

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

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

p {background-color: gray;}

배경색이 요소 내의 텍스트에서 희미해지도록 하려면 요소를 확장하려면 패딩을 추가하기만 하면 됩니다.

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

모든 요소의 배경색을 설정할 수 있습니다. 여기에는 본문부터 em 및 a와 같은 인라인 요소까지 포함됩니다.

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

배경 이미지

배경에 이미지를 넣으려면 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);}

이론적으로는 텍스트 영역과 같은 대체 요소의 배경에도 적용할 수 있습니다. 모든 사용자 에이전트가 이 상황을 잘 처리하는 것은 아니지만 이미지를 선택합니다.

그리고, 배경 이미지는 상속받을 수 없다는 점도 추가하고 싶습니다. 실제로 모든 배경 속성은 상속되지 않습니다.

위 내용은 CSS 배경을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!