ตัดตอนมาจากงานคนอื่นครับ~~~ ของดีมาก Grammar:
ตำแหน่งพื้นหลัง : length ||. length
ตำแหน่งพื้นหลัง: ตำแหน่ง ||
ค่าตำแหน่ง:
length : เปอร์เซ็นต์ | ค่าความยาวที่ประกอบด้วยตัวเลขทศนิยมและตัวระบุหน่วย
ตำแหน่ง: บน |. กลาง |. ล่าง |. กลาง |
.
ตั้งค่าหรือดึงข้อมูลตำแหน่งภาพพื้นหลังของวัตถุ ต้องระบุแอตทริบิวต์ภาพพื้นหลังก่อน การวางตำแหน่งคุณสมบัตินี้ไม่ได้รับผลกระทบจากการตั้งค่าช่องว่างภายในของวัตถุ
ค่าเริ่มต้นคือ: 0% 0% ในเวลานี้ภาพพื้นหลังจะอยู่ที่มุมซ้ายบนของพื้นที่เนื้อหาของออบเจ็กต์โดยไม่รวมช่องว่างภายใน
หากระบุเพียงค่าเดียว ค่านั้นจะถูกใช้สำหรับ abscissa การเรียงลำดับจะเริ่มต้นที่ 50% หากระบุสองค่า ค่าที่สองจะถูกใช้สำหรับการจัดลำดับ
หากค่าที่ตั้งไว้อยู่ตรงกลางด้านขวา เนื่องจากค่า Abscissa ทางด้านขวาจะเขียนทับค่ากึ่งกลาง ภาพพื้นหลังจะอยู่ทางด้านขวา
คุณสมบัติสคริปต์ที่เกี่ยวข้องคือ backgroundPosition
ตำแหน่งพื้นหลัง -- กำหนดค่าตำแหน่ง
ของภาพพื้นหลัง:
[ <เปอร์เซ็นต์> |. <ความยาว> |. กลาง |. ขวา ]
* ระดับ
ซ้าย: ซ้าย
ศูนย์กลาง: ปานกลาง
ขวา: ถูกต้อง
* แนวตั้ง
ด้านบน: เปิด
ศูนย์กลาง: ปานกลาง
ด้านล่าง: ถัดไป
* การรวมกันของแนวตั้งและแนวนอน
x-% y-%
x-pos
ค่าเริ่มต้น y-pos: 0% 0%
มรดก: ไม่ใช่
นำไปใช้กับ: องค์ประกอบทั้งหมด
พื้นหลัง: background.position: ตำแหน่ง ***************************** ประเด็นสำคัญที่จะอธิบาย: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 เฉพาะกาล//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<หัว>
<title>ปัญหาการวางตำแหน่งพื้นหลัง</title>
<style type="text/css">
-
-
ระยะขอบ:0;
ช่องว่างภายใน:0;
}
ร่างกาย {
การจัดตำแหน่งข้อความ: กึ่งกลาง;
พื้นหลัง:#000;
}
#คอนเทนเนอร์{
ความกว้าง:1000px;
ระยะขอบ:0 อัตโนมัติ;
พื้นหลัง:#fff url(images/bg.jpg) ไม่ทำซ้ำด้านบนซ้าย;
ความสูง:500px;
-
-
</สไตล์>
</หัว>
<ร่างกาย>
<div id="คอนเทนเนอร์"> </div>
</ร่างกาย>
</html>1.พื้นหลังตำแหน่ง:ซ้ายบน; (ดูรูปที่ 1) มุมซ้ายบนของภาพพื้นหลังอยู่ในแนวเดียวกับมุมซ้ายบนของคอนเทนเนอร์ (คอนเทนเนอร์) และส่วนที่เกินจะถูกซ่อนไว้ เทียบเท่ากับตำแหน่งพื้นหลัง:0,0; และเทียบเท่ากับตำแหน่งพื้นหลัง:0%,0%;2.ตำแหน่งพื้นหลัง:ด้านล่างขวา; มุมขวาล่างของภาพพื้นหลังอยู่ในแนวเดียวกับมุมขวาล่างของคอนเทนเนอร์ และส่วนที่เกินจะถูกซ่อนไว้ เทียบเท่ากับตำแหน่งพื้นหลัง: 100%, 100% เทียบเท่ากับตำแหน่งพื้นหลังด้วย: ความกว้างของคอนเทนเนอร์ (คอนเทนเนอร์) - ความกว้างของภาพพื้นหลัง ความสูงของคอนเทนเนอร์ (คอนเทนเนอร์) - ความสูงของภาพพื้นหลัง 3. ตำแหน่งพื้นหลัง: 500px 15px ;(ดูรูปที่ 3) ภาพพื้นหลังถูกย้ายไปทางขวา 500px และลง 15px จากมุมซ้ายบนของคอนเทนเนอร์ และส่วนที่เกินจะถูกซ่อนไว้ 4.ตำแหน่งพื้นหลัง:-500px -15px; (ดูรูปที่ 4) ภาพพื้นหลังถูกย้ายไปทางซ้าย 500px และขึ้นไป 15px จากมุมซ้ายบนของคอนเทนเนอร์ และส่วนที่เกินจะถูกซ่อนไว้ 5.ตำแหน่งพื้นหลัง:50% 50% (ดูรูปที่ 5) เทียบเท่ากับด้านซ้าย: {ความกว้างของคอนเทนเนอร์ - ความกว้างของภาพพื้นหลัง}*เปอร์เซ็นต์ด้านซ้าย ส่วนที่เกินจะถูกซ่อนไว้ เทียบเท่ากับด้านขวา: {ความสูงของคอนเทนเนอร์ (คอนเทนเนอร์) - ความสูงของภาพพื้นหลัง}*เปอร์เซ็นต์ด้านขวา ส่วนที่เกินจะถูกซ่อนไว้ ตัวอย่างเช่น: ตำแหน่งพื้นหลัง:50% 50%; นั่นคือ ตำแหน่งพื้นหลัง: (1000-2000)*50%px, (500-30)*50%px; ; นั่นคือ ภาพพื้นหลังเลื่อนไปทางซ้าย 500px จากมุมซ้ายบนของคอนเทนเนอร์และเลื่อนลง 235px 6. (ในกรณีนี้ ภาพพื้นหลังควรเป็น bg2.jpg เพื่อดูเอฟเฟกต์ ความสูงของ bg.jpg มีขนาดเล็กเกินไปและเอฟเฟกต์ไม่ชัดเจน) ตำแหน่งพื้นหลัง :-50% -50%; (ดูรูปที่ 6) เทียบเท่ากับด้านซ้าย: -{{ความกว้างของคอนเทนเนอร์ (คอนเทนเนอร์) - ความกว้างของภาพพื้นหลัง}*เปอร์เซ็นต์ด้านซ้าย (เปอร์เซ็นต์ทั้งหมดเป็นค่าบวก)} และส่วนที่เกินจะถูกซ่อนไว้ เทียบเท่ากับด้านขวา: -{{ความสูงของคอนเทนเนอร์ (คอนเทนเนอร์) - ความสูงของภาพพื้นหลัง}*เปอร์เซ็นต์ด้านขวา (เปอร์เซ็นต์ทั้งหมดเป็นค่าบวก)} และส่วนที่เกินจะถูกซ่อนไว้ ตัวอย่างเช่น: ตำแหน่งพื้นหลัง:-50% -50%; คือตำแหน่งพื้นหลัง:-{(1,000-500)*50%}px,-{(500-360)*50%}px; - 250px,-70px; นั่นคือ ภาพพื้นหลังจะเลื่อนไปทางซ้าย 250px จากมุมซ้ายบนของคอนเทนเนอร์และเลื่อนขึ้นไป 70px