CSS

[background] CSS - Multi Background 구문 - 한번에 여러 배경 속성값 사용

목차

  1. Multi Background 정의 - 한번에 여러 배경 속성값 사용
  2. Multi Background 구문
  3. Multi Background 예제

 

Multi Background 정의 - 한번에 여러 배경 속성값 사용

 

background-color 속성 제외한 나머지 배경 관련 속성은 한번에 여러 속성값을 나열해 사용 가능.



 

1. 여러 속성값 지원 배경 속성

 

2.
나열된 속성값은 계층적으로 적용. (∴ 이미지가 투명해야 아래 것이 보임.)

  • 첫 번째 속성값: 맨 위
  • 마지막 속성값: 맨 밑

 

3.

나열된 속성값은 각자 같은 자리끼리 적용됨.

  • 첫 번째 속성값은 첫 번째 속성값끼리 연동 작용
  • 마지막 속성값은 마지막 속성값끼리 연동 작용

 

 

Multi Background 구문

 

selector {background: bgValue1, bgValue2, ...}

 

PS. background 속성 자리에 background-color 속성 제외한 나머지 속성 가능.

 

Multi Background 예제

※ 각 속성이 여러 속성값 사용 시, 같은 순번끼리 작동.

 

<style>

.hz {

  padding:100px;

  background-image: 

      이미지주소1, 

      이미지주소2,

      이미지주소3;

  background-repeat: 

      이미지주소1에 적용할 속성값,

      이미지주소2에 적용할 속성값,

      이미지주소3에 적용할 속성값,

  background-position: 

      이미지주소1에 적용할 속성값,

      이미지주소2에 적용할 속성값,

      이미지주소3에 적용할 속성값,

}

</style>

 

<div class="hz">홈짱닷컴 Homzzang.com</div>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 5
웹유틸
회원센터
홈짱 PC버전 로그인