• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

분류 제목
background CSS - background 속성 ★ - 배경 일괄 (= background속성 = 백그라운드속성)
background CSS - background-color 속성 ★ - 배경색깔(=배경색상=배경컬러 = background-c…
background CSS - background-image 속성 ★ - 배경이미지 (= background-image속성 = …
background CSS - background-repeat 속성 ★ - 배경이미지 반복 (= 배경반복 = background…
background CSS - background-attachment 속성 - 배경이미지 고정 (= background-atta…
background CSS - background-position 속성 = 배경위치 (= background-position속성…
background CSS - background-clip 속성 - 배경영역 (= background-clip속성 = 백그라운드…
background CSS - background-origin 속성 - 배경이미지 좌표시작점 (= 백그라운드오리진 속성)
background CSS - background-size 속성 ★ - 배경이미지 크기 (IE9) ※ 배경이미지 중첩
background CSS - backdrop-filter 속성 - 배경 필터 효과. (= 흐림효과 = 유리효과 = backdr…
background CSS - Multi Background 구문 - 한번에 여러 배경 속성값 사용
background CSS - mix-blend-mode 속성 = 해당요소의 부모요소 배경색과의 '결합/혼합' 방법 지정 (= …
background CSS - background-blend-mode 속성 - 해당요소 각 (배경색/배경미미지)층의 혼합방식 지…
background CSS - background-position-x 속성 - 배경이미지 x축위치(=수평위치) 설정 (= bac…
background CSS - background-position-y 속성 - 배경이미지 y축위치(=수직위치) 설정 (= bac…
목록
찾아주셔서 감사합니다. Since 2012