คุณสมบัติขนาดพื้นหลัง CSS
ตัวอย่าง
ระบุขนาดของภาพพื้นหลังด้วย "อัตโนมัติ" และเป็นพิกเซล:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติbackground-sizeระบุขนาดของรูปภาพพื้นหลัง
มีสี่รูปแบบที่แตกต่างกันที่คุณสามารถใช้กับคุณสมบัตินี้: ไวยากรณ์ของคำหลัก ("auto", "cover" และ "contain"), ไวยากรณ์ค่าเดียว (กำหนดความกว้างของภาพ (ความสูงกลายเป็น "อัตโนมัติ"), ไวยากรณ์สองค่า (ค่าแรก: ความกว้างของรูปภาพ ค่าที่สอง: ความสูง) และไวยากรณ์พื้นหลังหลายค่า (คั่นด้วยเครื่องหมายจุลภาค)
| ค่าเริ่มต้น: | รถยนต์ |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS3 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.backgroundSize="60px 120px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
ตัวเลขตามด้วย -webkit-, -moz- หรือ -o- ระบุเวอร์ชันแรกที่ทำงานกับคำนำหน้า
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
ไวยากรณ์ CSS
background-size: auto|length|cover|contain|initial|inherit;
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ระบุขนาดของภาพพื้นหลังด้วยเปอร์เซ็นต์:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
ตัวอย่าง
ระบุขนาดของภาพพื้นหลังด้วย "หน้าปก":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
ตัวอย่าง
ระบุขนาดของภาพพื้นหลังด้วย "มี":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
ตัวอย่าง
เรามีภาพพื้นหลังสองภาพ เราระบุขนาดของภาพพื้นหลังแรกด้วย "contain" และภาพพื้นหลังที่สองด้วย "cover":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
ตัวอย่าง
ใช้คุณสมบัติพื้นหลังที่แตกต่างกันเพื่อสร้างภาพ "ฮีโร่":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
หน้าที่เกี่ยวข้อง
กวดวิชาCSS: พื้นหลัง CSS
การอ้างอิง HTML DOM: คุณสมบัติ backgroundSize