• Q&A
  • 회원가입
  • 로그인

[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)

찾아주셔서 감사합니다. Since 2012