CSS3의 배경
CSS3는 배경 요소보다 강력하게 제어 할 수 있도록 몇 가지 새로운 배경 속성을 포함합니다.
이 장에서는 하나의 요소에 여러 개의 배경 이미지를 추가하는 방법을 배우게됩니다.
당신은 또한 다음과 같은 새로운 CSS3 속성에 대해 배우게됩니다 :
-
background-size -
background-origin -
background-clip
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 다음 -webkit-, -moz- , 또는 -o- 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 여러 배경
CSS3 당신이를 통해 요소에 대해 여러 배경 이미지를 추가 할 수 있습니다 background-image 속성입니다.
다른 배경 영상은 쉼표로 구분되며, 상기 이미지는 제 화상이 관찰자에 가장 가까운 위치를 서로의 상부에 적층된다.
다음의 예는 첫 번째 이미지는 꽃 (오른쪽 하단에 정렬)이고 두 번째 이미지는 종이 배경 (왼쪽 위 모서리에 정렬)이며, 두 개의 배경 이미지를 가지고 :
예
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} »그것을 자신을 시도 여러 배경 이미지는 개별 배경 속성 (위와 같이) 또는 중 하나를 사용하여 지정할 수 있습니다 background 약식 속성을.
다음은 사용 background (위의 예와 같은 결과) 약식 속성을 :
예
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} »그것을 자신을 시도 CSS3 배경 크기
CSS3 background-size 속성은 배경 이미지의 크기를 지정할 수 있습니다.
CSS3 전에 배경 이미지의 크기는 화상의 실제 크기였다. CSS3는 서로 다른 상황에서 재사용 배경 이미지에 우리를 할 수 있습니다.
크기는 길이로 지정 될 수 있고, 또는이 두 키워드 중 하나를 이용하여 백분율 : 포함하거나 커버.
다음 예는 원본 이미지보다 훨씬 작다 (사용하는 화소)에 배경 이미지의 크기를 조정 :
원래 배경 이미지 :
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
크기 조정 배경 이미지 :
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
여기에 코드입니다 :
예
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
»그것을 자신을 시도 에 대한 두 가지 값 background-size 입니다 contain 하고 cover .
contain 키워드 (컨텐츠 영역 안에 장착해야하지만, 그 폭과 높이 모두) 최대한 크게 배경 이미지 스케일링. 이와 같이, 배경 이미지 및 배경에 위치 결정 영역의 비율에 따라, 배경 화상에 의해 커버되지 않은 배경의 일부 영역이있을 수있다.
cover 컨텐츠 영역이 완전히 (폭 및 높이가 모두 동일 또는 콘텐츠 영역을 초과) 배경 화상이 적용되도록 키워드는 배경 이미지를 스케일링. 이와 같이, 배경 이미지의 일부는 배경 위치 영역에 표시되지 않을 수 있습니다.
다음 예제의 사용 설명 contain 및 cover :
예
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
»그것을 자신을 시도 여러 배경 이미지의 크기를 정의
background-size 여러 배경 작업 할 때 재산은, (쉼표로 구분 된 목록을 사용하여) 배경 크기에 대한 여러 값을 허용합니다.
다음의 예는 세 개의 배경 이미지는 다른과, 지정한 background-size 각 이미지에 대한 값 :
예
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} »그것을 자신을 시도 전체 크기 배경 이미지
이제 우리는 항상 전체 브라우저 창을 커버하는 웹 사이트에 배경 이미지를 갖고 싶어.
다음과 같은 요구 사항은 다음과 같습니다
- 이미지와 전체 페이지 (아무 공백) 입력
- 스케일 이미지를 필요에 따라
- 페이지의 센터 이미지
- 스크롤바가 발생하지 마십시오
다음의 예는 그것을 수행하는 방법을 보여줍니다; HTML 엘리먼트를 사용 (HTML 엘리먼트는 브라우저 윈도우의 적어도 높이 항상). 그 다음에 고정을 중심으로 배경을 설정합니다. 그 다음으로 크기 조정 background-size 속성을 :
예
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} »그것을 자신을 시도 CSS3 background-origin 재산권
CSS3의 background-origin 배경 이미지가 위치하는 곳 속성을 지정합니다.
이 건물은 세 가지 다른 값을 사용합니다 :
- border-box - 배경 이미지는 테두리의 왼쪽 상단 모서리에서 시작
- padding-box - (기본값) 배경 이미지는 패딩 모서리의 왼쪽 상단 모서리에서 시작
- content-box - 배경 이미지는 콘텐츠의 왼쪽 상단 모서리에서 시작
다음은 도시 background-origin 특성을 :
예
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
»그것을 자신을 시도 CSS3 background-clip 속성
CSS3의 background-clip 속성은 배경의 그림 영역을 지정합니다.
이 건물은 세 가지 다른 값을 사용합니다 :
- border-box - (기본값) 배경은 테두리의 바깥 쪽 가장자리에 그려진
- padding-box - 배경은 패딩의 바깥 쪽 가장자리에 그려진
- content-box - 배경은 콘텐츠 상자 내에서 그린
다음은 도시 background-clip 속성을 :
예
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
»그것을 자신을 시도 연습으로 자신을 테스트!
CSS3 배경 등록
| 재산 | 기술 |
|---|---|
| background | 하나의 선언에있는 모든 배경 속성을 설정하는 약식 속성 |
| background-clip | 배경의 그림 영역을 지정합니다 |
| background-image | 요소의 하나 또는 그 이상의 배경 이미지를 지정 |
| background-origin | 배경 이미지 (들) / 위치 위치를 지정합니다 |
| background-size | 지정 배경 화상의 크기 (S) |