นักพัฒนาเว็บใช้คุณสมบัติตำแหน่งพื้นหลัง CSS เมื่อพวกเขาต้องการปรับตำแหน่งเริ่มต้นสำหรับภาพพื้นหลังที่พวกเขากำลังทำงานด้วย ในบทความนี้ เราจะมาดูคุณสมบัติตำแหน่งพื้นหลังและวิธีปรับเพื่อเปลี่ยนตำแหน่งของภาพ
ไวยากรณ์
ไวยากรณ์สำหรับคุณสมบัติตำแหน่งพื้นหลังภายในตัวเลือก CSS มีดังนี้:
background-position: value
มีหลายวิธีในการประกาศค่าบนตำแหน่งพื้นหลัง:
- มีค่าคู่คำหลักหลายค่าที่สามารถใช้ได้:
- ซ้ายบน
- ตรงกลางด้านซ้าย
- ล่างซ้าย
- ขวาบน
- ตรงกลางด้านขวา
- ล่างขวา
- ตัวกลาง
- เซ็นเตอร์เซ็นเตอร์
- ด้านล่างตรงกลาง
คำแรกแสดงถึงแกนนอนหรือแกน x คำที่สองแทนแกนแนวตั้งหรือแกน y หากมีการประกาศเพียงค่าเดียว ค่า y จะถูกตั้งค่าเป็น 'center' โดยอัตโนมัติ
- x%, y%:
เช่นเดียวกับตัวเลือกแรก คุณสามารถระบุค่าได้สูงสุดสองค่า:ค่าหนึ่งสำหรับตำแหน่งแนวนอนบนแกน x และอีกค่าสำหรับตำแหน่งแนวตั้งบนแกน y หากระบุเพียงค่าเดียว ค่า y% จะถูกตั้งค่าเป็น 50% เพื่อให้รูปภาพอยู่กึ่งกลางบนแกน y ซ้ายบนคือ 0% 0% ขวาบนคือ 100% 0% ซ้ายล่างคือ 100% 0% และล่างขวาคือ 100% 100%
- xpos, ypos (เป็น px/rem/em/pt):
คล้ายกับสองตัวเลือกก่อนหน้านี้ แต่ตัวเลขจะได้รับในหน่วย CSS แทนที่จะเป็นเปอร์เซ็นต์ (แม้ว่าคุณสามารถผสมเปอร์เซ็นต์และ rem/em/px/pt ได้หากต้องการ) หากไม่มีการระบุค่าที่สอง ypos จะถูกตั้งค่าเป็น 50%
ต่อไปนี้คือตัวอย่างบางส่วนที่แสดงค่าต่างๆ โดยใช้ตัวเลือกแรก:
ซ้ายบน:
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Top Left</title>
<style>
body {
background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: top left;
display: flex;
flex-flow: row wrap;
}
div {
height: 200px;
width: 25%;
background: transparent;
border: 5px double ivory;
margin: 20px;
}
#text-block {
background: ivory;
border: 5px double black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="text-block">
top left
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="script.js">
</script>
</body>
</html> ตรงกลางด้านขวา:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Center Right</title>
<style>
body {
background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center right;
display: flex;
flex-flow: row wrap;
}
div {
height: 200px;
width: 25%;
background: transparent;
border: 5px double ivory;
margin: 20px;
}
#text-block {
background: ivory;
border: 5px double black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="text-block">
center right
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="script.js">
</script>
</body>
</html> ล่างซ้าย:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bottom Left</title>
<style>
body {
background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3334&q=80");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: bottom left;
display: flex;
flex-flow: row wrap;
}
div {
height: 200px;
width: 25%;
background: transparent;
border: 5px double ivory;
margin: 20px;
}
#text-block {
background: ivory;
border: 5px double black;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="text-block">
bottom left
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="script.js">
</script>
</body>
</html> บทสรุป
หวังว่าโปรแกรมแก้ไขโค้ดด้านบนจะช่วยให้คุณเข้าใจถึงวิธีที่คุณสามารถใช้คุณสมบัติตำแหน่งพื้นหลังใน CSS ของคุณ ลองเล่นดู – เปลี่ยนภาพพื้นหลังที่ใช้ที่นี่ เปลี่ยนตำแหน่ง – เพื่อดูว่าจะทำอะไรได้บ้าง!
