mozilla
검색 결과

    여러개의 배경 지정하기

    CSS3를 사용하면 엘리먼트에 여러개의 배경을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상(color)는 맨 마지막에만 지정할 수 있다. 

    여러개의 배경을 지정하는건 간단하다.

    .myclass {
      background: background1, background 2, ..., backgroundN;
    }
    

    배경에 관련된 다른 속성들은 background 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다.  하지만  background-color 속성은 리스트 형태로 지정할 수 없다. 다음과 같은 속성들은 리스트 형태로 동시에 여러개 지정할 수 있다.  background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size

    예제

    이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. 

    .multi_bg_example {
      background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
            linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
            url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
      background-repeat: no-repeat, no-repeat, repeat;
      background-position: bottom right, left, right;
    }
    
    Result
    css_multibg.png

    첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. background-repeatbackground-position) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 background-repeat 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.

    더 보기

    문서 태그 및 공헌자

    태그: 
    Contributors to this page: jaemin_jo, Inyoung, teoli
    최종 변경: Inyoung,