คุณสมบัติ background-position-x CSS

การประกาศและการใช้งาน

background-position-x ตั้งค่าของอุปกรณ์เพื่อจัดตำแหน่งภาพ배경บนแนว x:

คำแนะนำ:โดยมาตราฐาน ภาพ배경ที่ถูกจัดลงในมุมบนขวาขององค์ประกอบ และถูกเรียกโดยวางแบบตามทิศทางตั้งแต่ต้นทางจนถึงจุดสิ้นสุดของเลขาะละแบบภาพที่ถูกใช้:

ตัวอย่าง

ตัวอย่าง 1

แบบจำลองการจัดตำแหน่งภาพ배경บนนานาทีซอย x:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: center;
}

ลองเขียนด้วยตัวเอง

ตัวอย่าง 2

แบบจำลองการจัดตำแหน่งภาพ배경ที่ด้านขวา:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: right;
}

ลองเขียนด้วยตัวเอง

ตัวอย่าง 3

แบบจำลองการใช้ตำแหน่งภาพ배경ด้วยเปอร์เซ็นต์:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 50%;
}

ลองเขียนด้วยตัวเอง

ตัวอย่าง 4

แบบจำลองการใช้ตำแหน่งภาพ배경ด้วยพิกเก็ตตัวเลข:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-x: 150px;
}

ลองเขียนด้วยตัวเอง

ตัวอย่าง 5

สร้างภาพ배경ที่คลุมแทนตัวแบบแบบส่วนที่ใช้แบบภาพที่แตกต่างกัน:

.hero-image {
  background-image: url("photographer.jpg"); /* 使用的图像 */
  background-color: #cccccc; /* ถ้าภาพหลังไม่สามารถใช้ได้ ใช้สีนี้ */
  height: 300px; /* ต้องตั้งค่าความสูง */
  background-position-x: center; /* จัดตั้งภาพหลังในฟาก x ตรงกลาง */
  background-repeat: no-repeat; /* ไม่ทำการซ้ำภาพ */
  background-size: cover; /* ปรับขนาดภาพหลังให้ครอบคลุมทั้งหมดของตัวจัดการ */
}

ลองเขียนด้วยตัวเอง

การเขียนภาษา CSS

background-position-x: value;

ค่าคุณสมบัติ

รายละเอียดเทคนิค

การสนับสนุนเบราซเซอร์

ตัวเลขในตารางนี้แสดงรุ่นการเรียกใช้ที่สนับสนุนคุณสมบัตินี้เต็มที่ของเบราซเซอร์

หน้าที่เกี่ยวข้อง

คู่มือ:CSS พื้นหลัง

CSS ความรู้background-image ทางความรู้

CSS ความรู้background-position ทางความรู้

CSS ความรู้background-position-y ทางความรู้

HTML DOM ความรู้backgroundPosition ทางความรู้