반응이 빠른 웹 디자인 - 배경 이미지 정보
CSS 반응이 빠른 웹 디자인 - 배경 이미지본문
반응이 빠른 웹 디자인 - 배경 이미지
배경 이미지
배경 이미지는 크기 조정 및 크기 조정에 응답 할 수도 있습니다.
여기에서는 세 가지 방법을 보여줍니다.
1. background-size속성이 "포함"으로 설정된 경우 배경 이미지의 크기가 조정되고 내용 영역에 맞춰보십시오. 그러나 이미지는 종횡비 (이미지의 폭과 높이 사이의 비례 관계)를 유지합니다.
다음은 CSS 코드입니다.
예
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. background-size속성을 "100 % 100 %"로 설정하면 배경 이미지가 전체 내용 영역을 포함하도록 확장됩니다.
다음은 CSS 코드입니다.
예
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. background-size속성이 "표지"로 설정된 경우 배경 이미지가 전체 내용 영역을 포함하도록 확장됩니다. "표지"값은 종횡비를 유지하며 배경 이미지의 일부가 잘릴 수 있습니다.
다음은 CSS 코드입니다.
예
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
2
댓글 1개
꾸벅~