CSS3-다중 배경

다중 배경

CSS 다중 배경 속성은 HTML 코드없이 한 번에 하나 이상의 이미지를 추가하는 데 사용되며, 요구 사항에 따라 이미지를 추가 할 수 있습니다. 다중 배경 이미지의 샘플 구문은 다음과 같습니다.

#multibackground {
   background-image: url(/css/images/logo.png), url(/css/images/border.png);
   background-position: left top, left top;
   background-repeat: no-repeat, repeat;
   padding: 75px;
}

가장 일반적으로 사용되는 값은 다음과 같습니다.

Sr. 아니.	가치 및 설명
1	background 한 섹션에서 모든 배경 이미지 속성을 설정하는 데 사용됩니다.
2	background-clip 배경의 페인팅 영역을 선언하는 데 사용됩니다.
삼	background-image 배경 이미지를 지정하는 데 사용됩니다.
4	background-origin 배경 이미지의 위치를 지정하는 데 사용됩니다.
5	background-size 배경 이미지의 크기를 지정하는 데 사용됩니다.

예

다음은 다중 배경 이미지를 보여주는 예입니다.

<html>
   <head>
      <style>
         #multibackground {
            background-image: url(/css/images/logo.png), url(/css/images/border.png);
            background-position: left top, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
         }
      </style>
   </head>

   <body>
   
      <div id = "multibackground">
         <h1>www.tutorialspoint.com</h1>
         <p>
            Tutorials Point originated from the idea that there exists a class of 
            readers who respond better to online content and prefer to learn new 
            skills at their own pace from the comforts of their drawing rooms. 
            The journey commenced with a single tutorial on HTML in  2006 and elated 
            by the response it generated, we worked our way to adding fresh tutorials 
            to our repository which now proudly flaunts a wealth of tutorials and 
            allied articles on topics ranging from programming languages to web designing 
            to academics and much more..
         </p>
      </div>
      
   </body>
</html>

다음 결과가 생성됩니다-

다중 배경 크기

다중 배경 속성은 이미지마다 다른 크기를 추가 할 수 있습니다. 샘플 구문은 다음과 같습니다.

#multibackground {
   background: url(/css/imalges/logo.png) left top no-repeat, url(/css/images/boarder.png) right bottom no-repeat, url(/css/images/css.gif) left top repeat;
   background-size: 50px, 130px, auto;
}

위의 예에서 볼 수 있듯이 각 이미지는 50px, 130px 및 자동 크기와 같은 특정 크기를 가지고 있습니다.