หากต้องการย่อโค้ดให้สั้นลง คุณสามารถระบุคุณสมบัติพื้นหลังทั้งหมดในที่เดียวได้ ทรัพย์สินเดียว สิ่งนี้เรียกว่าคุณสมบัติชวเลข
แทนที่จะเขียน:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}คุณสามารถใช้คุณสมบัติชวเลข พื้นหลัง:
ใช้คุณสมบัติชวเลขเพื่อตั้งค่าคุณสมบัติพื้นหลังเป็นหนึ่งเดียว ประกาศ:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>The background Property</h1>
<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>
<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>
<p>We have also added a right margin, so that the text will not write over the background image.</p>
</body>
</html>
เมื่อใช้คุณสมบัติชวเลขลำดับของค่าคุณสมบัติคือ:
สีพื้นหลัง
ภาพพื้นหลัง
พื้นหลังซ้ำ
สิ่งที่แนบมากับพื้นหลัง
ตำแหน่งพื้นหลัง
ไม่สำคัญว่าค่าคุณสมบัติค่าใดค่าหนึ่งจะหายไป ตราบเท่าที่ ส่วนอันอื่นอยู่ในลำดับนี้ โปรดทราบว่าเราไม่ได้ใช้คุณสมบัติ background-attachment ในตัวอย่างข้างต้น เนื่องจากไม่มีค่า
ตั้งค่าคุณสมบัติพื้นหลังทั้งหมดในการประกาศเดียว
ตั้งค่าว่าจะให้ภาพพื้นหลังได้รับการแก้ไขหรือเลื่อนไปพร้อมกับส่วนที่เหลือของหน้า
ระบุพื้นที่การวาดภาพของพื้นหลัง
กำหนดสีพื้นหลังขององค์ประกอบ
ตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบ
ระบุตำแหน่งของภาพพื้นหลัง
กำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง
ตั้งค่าวิธีการแสดงภาพพื้นหลังซ้ำ
ระบุขนาดของภาพพื้นหลัง (s)