CSS3 배경 크기 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

CSS3 배경 크기 정보

CSS CSS3 배경 크기

본문

CSS3 배경 크기

CSS3 background-size속성을 사용하면 배경 이미지의 크기를 지정할 수 있습니다.

CSS3 이전에는 배경 이미지의 크기가 이미지의 실제 크기였습니다. CSS3를 사용하면 다른 상황에서 배경 이미지를 재사용 할 수 있습니다.

크기는 길이, 백분율 또는 두 키워드 중 하나를 사용하여 지정할 수 있습니다 : 포함 또는 표지.

다음 예제는 픽셀을 사용하여 배경 이미지의 크기를 원본 이미지보다 훨씬 작게 조정합니다.


7fcc1208aa06480d62c8746827ea7f56_1501996750_9875.png
#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;
} 

추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT