[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 26회차 미션
배경
background
- 요소의 배경을 설정
- 속성 값
- background-color : 배경 색상
- 기본값 : transparent
- background-image : 하나 이상의 배경 이미지
- 기본값 : none
- background-repeat : 배경 이미지의 반복
- 기본값 : repeat
- background-position : 배경 이미지의 위치
- 기본값 : 0 0
- background-attachment : 배경 이미지의 스크롤 여부 (특성)
- 기본값 : scroll
- background-color : 배경 색상
사용법
background: 색상 이미지경로 반복 위치 스크롤특성;
/* 색상 이미지경로 반복 위치 스크롤특성 */
.box1 {
background: red url("../img/image.jpg") no-repeat left top scroll;
}
/* 이미지경로 반복 위치 */
.box2 {
background: url("../img/image.jpg") no-repeat right 100px;
}
/* 색상 */
.box3 {
background: red;
}
background-color
- 요소의 배경 색상을 지정
- 속성 값
- 색상 : 요소의 배경 색상
- transparent : 투명 (기본값)
div {
background-color: tomato;
}
/* 단축 속성으로도 사용 가능 */
div {
background: tomato;
}
background-image
- 요소의 배경에 하나 이상의 이미지를 삽입
- 속성 값
- none : 이미지 없음 (기본값)
- url('경로') : 이미지 경로 (URL)
사용법
background-image: url("경로");
.box {
background-image: url("../img/image.jpg");
width: 120px;
height: 80px;
}
배경 이미지 삽입 시, 요소의 크기가 설정되어 있어야 배경 이미지가 보일 수 있음
box1 {
/* 개별 속성 */
background-image: url("../image1.jpg"),
url("../image2.jpg"),
ulr("..image3.jpg");
}
box2 {
/* 단축 속성 */
background: url("../image1.jpg") no-repeat,
url("../image2.jpg") no-repeat 100px 50px,
url("../image3.jpg") repeat-x
}
하나 이상의 배경 이미지를 삽입할 경우
,
로 구분, 먼저 작성된 이미지가 더 위에 쌓임이런 '다중 배경 이미지'는 IE8 이하 버전에서 사용 불가능
프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM
Author And Source
이 문제에 관하여([패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 26회차 미션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ji-yeong/패스트캠퍼스-수강-후기-프론트엔드-인강-100-환급-챌린지-26회차-미션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)