CSS3 - พื้นหลังหลายแบบ

พื้นหลังหลายแบบ

คุณสมบัติ CSS Multi background ใช้เพื่อเพิ่มภาพทีละภาพโดยไม่ต้องใช้โค้ด 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;
}

ค่าที่ใช้บ่อยที่สุดแสดงไว้ด้านล่าง -

ซีเนียร์ มูลค่าและรายละเอียด
1

background

ใช้เพื่อตั้งค่าคุณสมบัติของภาพพื้นหลังทั้งหมดในส่วนเดียว

2

background-clip

ใช้เพื่อประกาศพื้นที่ภาพวาดของพื้นหลัง

3

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 และขนาดอัตโนมัติ