div CSS 배경 배경

배경 속성 - 배경은 CSS의 핵심 속성입니다. 당신은 그것을 잘 이해해야합니다. 이 글에서는 background-attachment까지 포함하여 배경과 관련된 모든 속성에 대해 자세히 설명하고, 곧 출시될 CSS3에서는 어떤 모습일지와 새로 추가된 배경 속성을 소개합니다.

CSS2에서 배경 속성 사용

검토

css2에는 5가지 배경 관련 속성이 있습니다.

background-color: 배경을 완전히 채우는 색상 -position: OK 배경 이미지의 위치

background-repeat: 배경을 채울지 여부를 결정합니다. 이미지가 반복적으로 배치됩니다

background-attachment: 배경 이미지가 페이지와 함께 스크롤되는지 확인

이러한 속성은 간단한 속성인 background로 작성할 수 있습니다. 배경은 패딩 및 테두리를 포함하여 요소의 콘텐츠 부분의 배경을 담당하지만 여백은 담당하지 않는다는 점을 지적해야 합니다. 이것이 Firefox, Safari, Opera 및 IE8에서 처리되는 방식입니다. 그러나 IE7과 빌어먹을 IE6에는 테두리가 포함되지 않으며 차이점은 아래 그림 예와 같습니다.

IE7, IE6에서는 Background에 border가 포함되지 않습니다

기본 속성

Background color 속성

background-color을 사용합니다. 설명 채우기 배경의 색상을 설정합니다. 채우기 색상을 정의하는 방법은 여러 가지가 있습니다.

background-color: blue;

background-color: rgb(0, 0, 255); 🎜>

background-color: #0000ff;

background-color를 투명하게 설정하여 그 아래 요소를 표시할 수도 있습니다.

배경 이미지 속성

background-image를 사용하면 자신이 만든 이미지를 배경으로 사용할 수 있습니다. 배경색과 밀접한 관련이 있습니다. 이미지가 전체 요소 배경을 타일링할 만큼 크지 않으면 빈 부분에 배경색으로 설정된 색상이 표시됩니다. 사용하기는 매우 간단하지만 이미지와 CSS 파일 간의 위치 관계를 기억해야 합니다.

background-image: url(image.jpg);

이미지가 다음 위치에 있는 경우 폴더는 다음과 같이 작성합니다. 모두 상대 경로를 사용합니다:

background-image: url(images/image.jpg);

Background 반복 속성

기본값 이미지가 전체 요소를 채울 때까지 수평 및 수직으로 반복됩니다. 그러나 때로는 한 방향으로만 반복하고 싶을 수도 있습니다. 그런 다음 다음과 같이 설정합니다.

background-repeat:peat; /* 기본값. 이미지가 모든 방향으로 반복됩니다.*/

background-repeat: no-repeat; 되풀이. 한 장의 그림만 나타납니다*/

background-repeat:peat-x; /* 가로 반복 펼치기*/

background-repeat:peat-y; /* 세로 반복 펼치기*/

background-repeat: 상속; /* 상위 요소의 background-repeat 속성 값을 사용합니다. */

배경 위치 속성

배경 이미지를 제어합니다. 요소 위치에 있습니다. 마스터링의 핵심은 배경 위치가 이미지의 왼쪽 상단이라는 것입니다.

다음은 background-position 속성의 데모입니다. 물론 background-repeat 속성을 no-repeat로 설정했습니다.

/* 예 1: 기본값 */

background-position: 0 0; /* 즉, 요소의 왼쪽 상단 */

/* 예 2: Shift 오른쪽으로 이동 */

background-position: 75px 0;

/* 예 3: 왼쪽으로 이동 */

background-position. : -75px 0;

/* 예 4: 아래로 이동 */

background-position: 0 100px;

배경 이미지의 위치는 마음대로

배경 위치 속성은 키워드, 백분율 등의 단위로도 작동할 수 있습니다. 정확히 픽셀(px) 단위일 필요는 없습니다.

키워드는 매우 일반적으로 사용되며 가로 방향에는

왼쪽

가운데

오른쪽

세로 방향이 있습니다. 다음이 있습니다:

top

center

bottom

이전과 마찬가지로 사용하세요.

배경 위치: 오른쪽 위;

백분율도 같은 방식으로 사용됩니다:

배경 위치: 100% 50%;

효과는 다음과 같습니다.

웃는 얼굴 이미지가 요소의 오른쪽 중앙에 설정됩니다.

배경 첨부 속성

background-attachment 속성은 사용자가 페이지를 스크롤할 때 배경 이미지에 어떤 일이 발생하는지 정의합니다. 여기에는 스크롤, 고정 및 상속이라는 세 가지 값이 있습니다. 배경 첨부 속성을 완전히 이해하기 위해 상속은 여전히 ​​상위 요소의 설정을 상속합니다. 먼저, 사용자가 페이지를 스크롤할 때 웹 페이지에 무슨 일이 일어나는지 파악해야 합니다. 값을 고정으로 설정하면 페이지를 아래로 스크롤할 때 콘텐츠가 아래로 스크롤되지만 배경은 함께 스크롤되지 않습니다. 결과는 마치 콘텐츠가 위쪽으로 스크롤되는 것과 같습니다. 물론 스크롤할 값을 설정하면 배경도 스크롤됩니다.

아래 예를 살펴보겠습니다.

background-image: url(test-image.jpg);

background-position: 0 0;

background-repeat: no-repeat;

background-attachment: scroll;

페이지를 아래로 스크롤하면 배경 이미지는 페이지가 나올 때까지 위로 스크롤됩니다.

다른 고정된 예를 살펴보세요.

background-image: url(test-image.jpg);

background-position: 0 100% ;

배경 반복: 반복 없음;

배경 첨부: 고정;

페이지를 아래로 스크롤하면 배경 이미지가 여전히 표시됩니다.

배경 이미지는 해당 요소 내에서만 이동할 수 있다는 점은 주목할 가치가 있습니다. 예는 다음과 같습니다.

background-image: url(test-image.jpg);

배경 위치: 0 100%;

배경 반복: 반복 없음;

배경 첨부: 고정;

요소 경계를 벗어났기 때문에 일부 사진이 사라졌습니다.

간단한 배경 속성

이러한 속성 설정을 속성에 작성할 수 있습니다.

background:

예를 들어 다음 설정은...

색상: 투명;

배경 이미지: url(image.jpg);

배경 위치: 50% 0 ;

배경 첨부: 스크롤;

배경 -반복: 반복-y;

... 다음과 같이 쓸 수 있습니다:

배경: 투명 URL(image.jpg) 50% 0 스크롤 반복-y;

그리고 모든 값을 설정할 필요도 없습니다. 작성하지 않으면 기본값이 사용됩니다. 따라서 위의 내용은 다음과 같이 작성할 수도 있습니다.

background: url(image.jpg) 50% 0peat-y;

"비전통적인" 배경 적용

배경 미화 요소를 설정하는 것 외에도 속성에는 다양한 비전통적 용도가 있습니다.

가짜 열

부동 속성 레이아웃을 사용할 때 두 열의 길이가 동일한지 확인하기 어려울 수 있습니다. 두 요소의 크기가 다르면 배경 이미지가 엉망이 됩니다. 가짜 열은 A List Apart에 처음 게시된 간단한 솔루션입니다.

간단히 말하면 상위 요소에 전체 배경 이미지를 설정하고 이미지의 세로 행 위치가 실제 분리 위치와 정확히 일치합니다.

텍스트 대체

웹에서 글꼴 선택은 매우 적습니다. 우리의 일반적인 방법은 텍스트 그림을 만드는 것이지만, 이 작업만으로는 검색 엔진에 친숙하지 않습니다. 이를 수행하는 일반적인 방법은 배경 속성을 사용하여 텍스트 이미지를 표시하고 그 위의 텍스트를 숨기는 것입니다. 이를 통해 검색 엔진과 화면 판독기에 친숙해지며 브라우저에서 멋진 글꼴을 볼 수 있습니다.

예를 들어 텍스트 정보는 다음과 같이 작성됩니다.

Blogroll

텍스트 이미지 너비가 200px인 경우 그런 다음 다음 CSS 코드를 사용하여 전체 이미지를 표시합니다.

h3.blogroll {

width: 200px

height: 75px /* 전체 이미지 표시 Image */

background:url(blogroll-text.jpg) 0 0 /* 이미지 설정*/

text-indent: -9999px; * 텍스트를 숨기려면 텍스트 9999px를 왼쪽으로 이동하세요*/

}

간편한 글머리 기호

순서가 지정되지 않은 목록 옵션의 기본 스타일이 보기에 좋지 않을 수 있습니다. 그런 다음 배경 이미지를 사용하여 더 멋지게 만듭니다.

list-style: none /* 기본 스타일을 제거합니다.

ul li {

padding-left: 40px; /* 배경을 위한 공간을 남겨두기 위해 콘텐츠를 내부로 이동합니다. */

background: url(bulletpoint.jpg) 0 0 no -repeat;

}

CSS3의 배경 속성

CSS3의 배경 속성에는 많은 변경 사항이 있습니다. 가장 눈에 띄는 점은 여러 배경 이미지에 대한 지원이 추가되고 4개의 새로운 속성과 기존 속성에 대한 변경 사항이 추가되었다는 것입니다.

여러 배경 이미지

CSS3를 사용하면 요소에 하나 이상의 배경 이미지를 사용할 수 있습니다. 코드는 CSS2와 동일하며 여러 이미지를 쉼표로 구분할 수 있습니다. 첫 번째로 선언된 이미지는 다음과 같이 요소 상단에 표시됩니다.

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image. jpg);

새 속성 1: 배경 클립

이 속성은 테두리 및 배경 속성에 대한 원래 질문으로 돌아갑니다.

background-clip 속성을 사용하면 배경이 표시되는 위치를 제어할 수 있습니다.

background-clip: border-box;

배경 테두리 지금과 같은 방식으로 표시됩니다. .

background-clip: padding-box;

배경은 테두리 대신 패딩으로 표시되며 이는 IE6과 동일합니다.

background-clip: content-box;

배경은 테두리나 패딩이 아닌 콘텐츠 내에서만 표시됩니다.

Background-clip: no-clip;

기본값, border-box와 동일합니다.

새 속성 2: Background Origin

이 속성은 background-position 속성과 함께 사용해야 합니다. 배경 위치가 계산되는 방식을 변경할 수 있습니다(배경 클립과 마찬가지로). 믿다.

배경 출처: 패딩 상자;

배경 위치는 패딩에서 계산됩니다.

배경 출처: 콘텐츠 상자;

배경 위치는 콘텐츠에서 계산됩니다.

background-clip 속성과 background-origin 속성 적용 예시는 CSS3.info를 참고하세요.

새 속성 3: 배경 크기

background- size 속성 배경 이미지의 크기를 조정하는 데 사용됩니다. 가능한 값은 다음과 같습니다:

background-size: contain;

요소 크기에 맞게 이미지를 축소합니다.

배경 크기: 커버;

요소 크기에 맞게 이미지를 확장합니다.

배경 크기: 100px 100px;

크기를 재정의하세요.

배경 크기: 50% 100%

백분율로 재정의합니다.

예를 살펴보세요: CSS 3 사양

새 속성 4: Background Break

CSS 3에서는 요소를 분할할 수 있습니다. 여러 부분으로 분할합니다(예: 인라인 요소 범위는 여러 줄을 차지할 수 있음). background-break 속성은 배경 이미지가 여러 섹션에 걸쳐 표시되는 방식을 제어합니다.

가능한 값은 다음과 같습니다:

백그라운드 중단: 연속;기본값

백그라운드 중단: 경계 상자;: 두 부분 사이 값이 고려되어 추가됩니다.

Background-break: 각 상자;: 각 섹션은 개별적으로 고려됩니다.

배경색 속성 변경

CSS3의 background-color 속성은 전경색과 배경색을 지원합니다: background-color: green / blue;

이 예에서는 기본 색상이 녹색입니다. 표시할 수 없는 경우 파란색을 사용합니다.

배경 반복 속성 변경

CSS 2에서는 경계를 넘어 이미지가 부분적으로 사라질 수 있다는 사실을 아직도 기억하시나요? CSS 3에는 이 문제를 해결하기 위해 두 가지 새로운 값이 있습니다.

space: 반복되는 이미지 사이의 간격을 설정합니다.

round: 반복되는 이미지의 크기가 자동으로 조정되어 요소를 정확하게 채웁니다.

백그라운드 반복: 공백 예: CSS 3 사양.

Background Attachment 속성 변경

background-attachment에 local..이라는 새로운 값이 가능합니다. 이는 스크롤 가능한 요소(예: 오버플로: 스크롤; 속성 포함)와 관련이 있습니다. background-attachment 값이 스크롤되면 배경 이미지가 콘텐츠와 함께 스크롤되지 않습니다. 이제 background-attachment:local을 사용하면 이미지가 콘텐츠와 함께 스크롤될 수 있습니다.