원본 링크: CSS의 배경: 알아야 할 모든 것
번역 링크: CSS 배경 가이드
재인쇄시 저작권과 링크를 유지해주세요
배경은 CSS의 중요한 부분이자 알아야 할 CSS의 기본 지식 중 하나입니다. 이 글에서는 background-attachment 등과 같은 속성을 포함하여 CSS 배경(Background)의 기본적인 사용법을 다루며, 배경(Background)뿐만 아니라 CSS3의 배경(Background)에 대한 몇 가지 일반적인 기술도 소개합니다(4개 포함). 새로운 배경 속성).
CSS2의 배경
개요
CSS2에는 5가지 주요 배경 속성이 있습니다.
이러한 속성은 모두 하나의 축약된 속성인 배경으로 결합될 수 있습니다. 주목해야 할 한 가지 중요한 점은 배경이 패딩 및 테두리를 포함하여 요소의 모든 콘텐츠 영역을 차지하지만 요소의 여백은 포함하지 않는다는 것입니다. Firefox, Safari, Opera 및 IE8에서는 잘 작동하지만 IE6 및 IE7에서는 배경에 테두리가 포함되지 않습니다.
기본 속성
배경색
background-color 속성은 배경을 단색으로 채웁니다. 이 색상을 지정하는 방법은 여러 가지가 있으며 다음 방법은 모두 동일한 결과를 제공합니다.
배경색: 파란색;
배경색: rgb(0, 0, 255);
배경색: #0000ff;
배경색을 투명하게 설정하여 배경색 아래에 있는 요소를 볼 수도 있습니다.
배경 이미지
background-image 속성을 사용하면 배경에 표시할 이미지를 지정할 수 있습니다. 배경색과 함께 사용할 수 있어, 이미지가 반복되지 않는 경우 이미지로 덮이지 않은 부분은 배경색으로 채워집니다. 코드는 매우 간단합니다. 경로가 스타일 시트에 상대적이라는 점만 기억하면 됩니다. 따라서 다음 코드에서는 이미지와 스타일 시트가 동일한 디렉터리에 있습니다.
배경 이미지: url(image.jpg);
그러나 그림이 이미지라는 하위 디렉터리에 있는 경우 다음과 같아야 합니다.
배경 이미지: url(images/image.jpg);
Tangbantomatoes: ../를 사용하여 background-image와 같이 상위 디렉터리를 나타냅니다. url(../images/image.jpg); 이미지가 상위 디렉터리의 이미지 하위 디렉터리에 있음을 나타냅니다. 스타일 시트. 조금 복잡하지만 모두가 이미 알고 있을 것이므로 자세한 설명은 생략하겠습니다. 프론트엔드 관찰 All Rights Reserved. 재인쇄 시 링크를 보관해 주세요.