การสร้างพื้นหลังด้วย background-image
การสร้างพื้นหลังด้วย background image สามารถปรับแต่งขนาด ได้หลายแบบด้วยกัน ดังตัวอย่างโค๊ดนี้
<html>
<head>
<style>
.backgroundimage1 {
width:300px;
height:200px;
background-color:#000000;
background:url('hideimage.html?type=jpg&fixpath=gallery/202104151738558175');
background-size:100%;
background-repeat:no-repeat;
border-style: dashed;
}
.backgroundimage2 {
width:300px;
height:200px;
background:url('hideimage.html?type=jpg&fixpath=gallery/202104151738558175');
background-size:120px 150px;
background-repeat:repeat;
border-style: dashed;
}
.backgroundimage3 {
width:300px;
height:200px;
background:url('hideimage.html?type=jpg&fixpath=gallery/202104151738558175');
background-size:cover;
border-style: dashed;
}
</style>
</head>
<body>
<div class="backgroundimage1"></div>
<div class="backgroundimage2"></div>
<div class="backgroundimage3"></div>
</body>
</html>
จะได้ผลลัพธ์ดังนี้
1. เป็นภาพการขยายขนาดให้เต็มตามความยาว แต่สังเกตุว่าความกว้างจะไม่เต็ม และเป็นภาพเดียว
2. เป็นภาพสั้นๆ ตามขนาดที่ตั้งค่าไว้ ซึ่งมีการสร้างภาพซ้ำๆ ไปจนเต็มช่องที่กำหนดไว้ ด้วยคำสั่ง repeat
3. เป็นภาพที่พยายามทำให้เต็มพื้นที่ในช่องนั้น ซึ่งไม่ได้มองว่าภาพจะสมบูรณ์หรือไม่ด้วย คำสั่ง cover
| จำนวนคนดู : 2,949 | วันที่สร้าง : 15/04/2021 |
