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